Текстовые разделители для элементов LI - PullRequest
Новая
       4

Текстовые разделители для элементов LI

32 голосов
/ 09 июня 2011

Я хотел бы добавить косую черту ('/') между моими элементами li, но я не уверен, что это лучший способ сделать это семантически. Прямо сейчас я просто включаю косую черту в тег li и добавляю интервалы с неразрывными пробелами, например: 

<ul id="footer_menu">
    <li>Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

Что ты думаешь? Спасибо.

Ответы [ 5 ]

78 голосов
/ 09 июня 2011

Вы можете использовать псевдоэлементы для включения текста после элемента, и вы можете использовать CSS3-селекторы, чтобы удалить косую черту из последнего элемента. 

#footer_menu li:after {
    content: "/";
}
#footer_menu li:last-child:after {
    content: "";
}

EDIT:

Все это можно сделать в одну строку с лучшим CSS3. 

#footer_menu li:nth-child(n+2):before {
    content: "/";
}

РЕДАКТИРОВАТЬ: РЕДАКТИРОВАТЬ:

Это даже проще, чем это. 

#footer_menu li + li:before {
    content: "/";
}
24 голосов
/ 05 августа 2011

Это мое решение для элемента LI, разделенного | (труба): 

li + li:before {
    content: " | ";
}

В этом случае очень удобно использовать комбинатор смежности (знак плюс +). Это позволяет стилизовать элемент, если ему непосредственно предшествовал другой указанный элемент. Поскольку первому li не предшествует другой li, к нему не будет добавлен контент. Это гораздо меньше печатать, чем: 

li:before {
  content: " | ";
}

li:first-child:before {
  content: "";
}
1 голос
/ 23 января 2015

Для тех, кто использует Sass , я написал mixin для этой цели: 

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

Пример: 

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

Что даст вам это: 

li+li:before {
  content: "|";
  padding: 0 1em;
}
1 голос
/ 09 июня 2011

Вы можете поместить содержимое li в span, а затем использовать CSS: 

ul#footer_menu li span:after { content:"/"; padding:0 5px; }

или что-то подобное.

edit Ах, как сказал Кайл, нодобавление правила last_child завершено.

0 голосов
/ 09 июня 2011

Если вы пытаетесь сделать что-то вроде Поддержка клиентов / Информация о доставке / Таблица размеров / Политика конфиденциальности / Контакт Вы можете просто сделать это с помощью CSS

Вам нужно будет добавить «первый» класс к первому li в вашем наборе, как показано ниже 

<ul id="footer_menu">
    <li class="first">Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

А потом следующий CSS 

 #footer_menu ul {  
    float: left; 
    padding: 10px;
    list-style: none outside none;
}

#footer_menu li {
    border-left: 2px solid #000000;
    float: left;
    padding: 0 10px;
}

#footer_menu li.first {
    border: none;
}

Это поместит все элементы li рядом друг с другом и даст вам границу. Результат будет выглядеть примерно так:

Поддержка клиентов | Информация о доставке | Таблица размеров | Политика конфиденциальности | Контакт

...