Cách tạo kiểu cho thanh dọc tức là "|"?

Question

Làm cách nào để tạo kiểu cho thanh dọc, tức là "|"? Tôi cần phải thay đổi chiều rộng và chiều cao của "|".

Đây là những gì tôi đang cố gắng làm.

<a href="link1"> Link 1 </a> | <a href="link2"> Link 2 </a> 

Answer 1

Đặt nó trong một phần tử, và phong cách các yếu tố:

<span class="bar">|</span> 

Trong tấm phong cách của bạn, ví dụ:

.bar { font-size: 20px; } 

Answer 2

Bạn không thể tạo kiểu ký tự riêng lẻ dễ dàng bằng css, trừ khi đó là ký tự duy nhất trong phần tử của bạn. Nếu nó ở trong một textarea bạn không có hy vọng. Nếu không, bạn có hy vọng: bạn phải tự sửa đổi nó với các thẻ <span class="specialBar">...</span> bất cứ khi nào nó xuất hiện trong văn bản bạn muốn tạo kiểu trong văn bản.

Bạn cũng có thể sử dụng một ký tự thanh dọc đơn khác theo ý thích của bạn.

---

chỉnh sửa, Để đáp ứng:

"Tôi về cơ bản muốn có một seprator giữa các liên kết Am i đi theo hướng sai - poster ban đầu.?"

Lý tưởng nhất là bạn sẽ sử dụng các nhịp, mà bạn có thể định hình bằng CSS để mô phỏng một đường thẳng đứng mỏng:

thi đua-với-một-span kỹ thuật - (live demo):

.linkSeparator { 
    display:inline-block; 
    margin-bottom:-1em; /*value should be (height-1em)/2*/ 
    height:3em; width:0.25em; 
    background-color:grey; 
    margin-left:0.5em; margin-right:0.5em; 
}​ 

link1<span class="linkSeparator"></span>link2<span class="linkSeparator">... 

kỹ thuật hình ảnh:

Bạn cũng có thể sử dụng hình ảnh (ít thanh lịch, sẽ không đi vào chi tiết).

anh chị em chọn kỹ thuật - (live demo):

Bạn cũng có thể thiết lập các border-left trên tất cả các liên kết mà không phải là người đầu tiên. Theo thông số w3c trên CSS2 adjacency selectors, "E + F Khớp bất kỳ phần tử F nào ngay trước phần tử anh chị em E." Do đó:

.separatedLinks a+a { 
    border-left: 2px solid black; 
} 

<??? class="separatedLinks"> 
    <a href="...">link1</a> 
    <a href="...">link2</a> 
    <a href="...">link3</a> 
</???> 

Bạn có thể có thể tìm thấy nhiều ví dụ tại google này nhấn: http://meyerweb.com/eric/articles/webrev/200007a.html

Answer 3

| là ký tự, và như su ch, lấy bất kỳ kiểu chữ nào bạn có thể áp dụng cho văn bản. Mặc dù vậy, tôi có ấn tượng rằng bạn có thể đang cố gắng sử dụng | để tạo đường viền hộp. Nếu đúng như vậy, bạn nên chọn kiểu dáng một phần tử cấp khối để có đường viền cố gắng sử dụng các ký tự.

Answer 4

Bạn không nên sử dụng đường ống (|) làm dấu phân cách, hãy sử dụng css thay thế.

Nói neo ở trong một div với id bằng breadcrumbs, như thế này:

<div id="breadcrumbs"> 
    <a href="#">One</a> 
    <a href="#">Two</a> 
    <a href="#">Three</a> 
</div>​ 

Sau đó bạn có thể thêm vào dải phân cách giữa họ với một quy tắc vài css, như thế này:

#breadcrumbs a { 
    padding: 0.5em; 
    border-right: 5px solid green; 
} 

#breadcrumbs a:last-child { 
    border-right: none; 
}​ 

Bạn có thể thay đổi kích thước, kiểu và màu sắc của dải phân cách với quy tắc border-right: 5px solid green. Here's an example (đã cập nhật) đang hoạt động. Here's some documentation trên kiểu đường viền.

Quy tắc thứ hai với :last-child ngăn dấu phân tách phụ sau phần tử cuối cùng.

Để thay đổi chiều cao của dấu phân cách, bạn sẽ thay đổi padding về quy tắc đầu tiên.

Nhu cầu phổ biến, một phiên bản danh sách:

Nếu bạn đặt các liên kết trong một danh sách:

<ul id="breadcrumb-list"> 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">Three</a></li> 
</ul>​ 

Và sử dụng quy tắc như thế này:

ul#breadcrumb-list li { 
    display: inline-block; 
    margin: 0; 
    padding: 1em 1em 0 1em; 
    border-right: 1px dotted blue; 
} 

ul#breadcrumb-list li:last-child { 
    border-right: none; 
} 

Bạn có thể sử dụng a ul để đánh dấu danh sách liên kết của bạn để có ngữ nghĩa tốt hơn. Bạn phải thêm inline-block để đặt chúng trên một dòng, li theo mặc định là phần tử cấp khối.

Tôi cũng đã thể hiện một phong cách khác mà bạn có thể đạt được bằng cách thay đổi các quy tắc về đệm và đường viền.