Dấu phân cách cho Điều hướng

Tôi cần thêm dấu phân cách giữa các phần tử của điều hướng. Dấu phân cách là hình ảnh.

Cấu trúc HTML của tôi là như sau: ol > li > a > img.

Ở đây tôi đi đến hai giải pháp khả thi:

1. Để thêm licác thẻ khác để phân tách (boo!),
2. Bao gồm dấu phân cách trong hình ảnh của mỗi phần tử (điều này tốt hơn, nhưng nó có khả năng người dùng có thể nhấp vào, ví dụ: "Trang chủ", nhưng truy cập "Dịch vụ", bởi vì chúng nằm sau phần tử kia và người dùng có thể vô tình nhấp vào dấu phân cách thuộc về "Dịch vụ");

Để làm gì?

Chỉ cần sử dụng hình ảnh phân tách làm hình nền trên li.

Để nó chỉ xuất hiện ở giữa các mục danh sách, hãy đặt hình ảnh ở bên trái lichứ không phải ở vị trí đầu tiên.

Ví dụ:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

CSS này thêm hình ảnh vào mọi mục danh sách theo sau một mục danh sách khác - nói cách khác là tất cả chúng trừ mục đầu tiên.

NB. Lưu ý rằng bộ chọn liền kề (li + li) không hoạt động trong IE6, vì vậy bạn sẽ phải thêm hình nền vào li thông thường (với biểu định kiểu có điều kiện) và có thể áp dụng một lề âm cho một trong các cạnh.

Nếu không cần thiết phải sử dụng hình ảnh cho các dấu phân cách, bạn có thể thực hiện việc này với CSS thuần túy.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

Thao tác này đặt một thanh giữa mỗi mục danh sách, giống như hình ảnh trong câu hỏi ban đầu được mô tả. Nhưng vì chúng tôi đang sử dụng các bộ chọn liền kề , nó không đặt thanh trước phần tử đầu tiên. Và vì chúng tôi đang sử dụng :beforebộ chọn giả, nó không đặt một bộ chọn ở cuối.

Bạn có thể thêm một liphần tử mà bạn muốn thêm dải phân cách

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

Trong CSS, bạn có thể Thêm mã sau.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Điều này sẽ giúp bạn tăng tốc độ thực thi vì nó sẽ không tải bất kỳ hình ảnh nào. chỉ cần kiểm tra nó ra .. :)

Các giải pháp khác là OK, nhưng không cần phải thêm dấu phân tách ở cuối cùng nếu sử dụng : sau hoặc ngay từ đầu nếu sử dụng : trước .

VÌ THẾ:

trường hợp: sau

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

trường hợp: trước đây

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

Để lấy dấu phân cách căn giữa theo chiều dọc so với văn bản menu,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

Thêm dấu phân cách vào linền và đảm bảo liên kết không mở rộng để che dấu phân cách, điều đó có nghĩa là dấu phân cách sẽ không thể nhấp vào.

Đối với những người sử dụng Sass , tôi đã viết một bản mixin cho mục đích này:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Thí dụ:

@include addSeparator('li', '|', 1em);

Cái nào sẽ cung cấp cho bạn điều này:

li+li:before {
  content: "|";
  padding: 0 1em;
}

Tôi tin rằng giải pháp tốt nhất cho việc này là những gì tôi sử dụng và đó là đường viền css tự nhiên:

border-right:1px solid;

Bạn có thể cần quan tâm đến lớp đệm như:

padding-left: 5px;
padding-right: 5px;

Cuối cùng, nếu bạn không muốn chữ cái cuối cùng có đường viền ngăn cách đó, hãy đặt chữ con cuối cùng là "none" trong "border-right" như thế này:

li:last-child{
  border-right:none;
}

Chúc may mắn :)

Đặt nó làm nền trên phần tử danh sách:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

Tiếp theo, tôi đề xuất một đánh dấu khác cho khả năng truy cập:
Thay vì nhúng các hình ảnh vào dòng, hãy đặt văn bản vào dưới dạng văn bản, bao quanh mỗi dấu cách bằng khoảng trắng, áp dụng hình ảnh làm nền và sau đó ẩn văn bản với hiển thị: không có - điều này mang lại sự linh hoạt về kiểu dáng hơn nhiều và cho phép bạn sử dụng xếp lớp với hình ảnh bg rộng 1px, tiết kiệm băng thông và bạn có thể nhúng nó vào CSS sprite, giúp tiết kiệm các cuộc gọi HTTP:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

CẬP NHẬT OK, tôi thấy những người khác đã có câu trả lời tương tự trước tôi - và tôi lưu ý rằng John cũng bao gồm một phương tiện để giữ cho dấu phân cách không xuất hiện trước phần tử đầu tiên, bằng cách sử dụng bộ chọn li + li - có nghĩa là bất kỳ li nào đứng sau một li.