Как оформить неупорядоченные списки в CSS как текст, разделенный запятыми

Question

Я ищу способ стилизовать неупорядоченный список в XHTML с помощью CSS, чтобы он отображался встроенным, а элементы списка разделялись запятыми.

Например, следующий список должен отображаться как apple, orange, banana (обратите внимание на пропущенную запятую в конце списка).

<ul id="taglist">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

В настоящее время я использую следующий CSS для стилизации этого списка, который почти выполняет то, что я хочу, но отображает список как apple, orange, banana, (обратите внимание на запятую после банана).

#taglist {
  display: inline;
  list-style: none;
}

#taglist li {
  display: inline;
}

#taglist li:after {
  content: ", ";
}

Есть ли способ решить эту проблему с помощью чистого CSS?

Answer 1

Чтобы удалить запятую, используйте псевдокласс :last-child, например:

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

Answer 2

Заменить один ваше правило

#taglist li:after {
    content: ", ";
}

с просто еще один

#taglist li + li:before {
    content: ", ";
}

Плюсы:

• Одно правило: всю работу .
• Нет правил отмены предыдущего правила,
• IE8 Поддержка

Answer 3

С помощью CSS3 легко использовать псевдо-селектор last-child и not одновременно:

ul#taglist li:not(:last-child):after {
    content: ", ";
}

Результаты проверки здесь https://jsfiddle.net/vpd4bnq1/

Answer 4

Это зависит от реализации браузера, но это должно работать. Хотя он опирается на first-child, что может ограничивать его использование, но по существу ставит запятую ", " перед элементом списка, а не после. Я не уверен, как padding / margin s повлияет на это, но если вы используете `display: inline; с полями и отступами, установленными на ноль, все должно быть в порядке.

#taglist li:before {content: ", ";}
#taglist first-child {content: ""; } /* empty string */

<ч />

Отредактировано: для ответа на исправления, предложенные Якобом в комментариях.

Следующие работы (демо-страница здесь: http://davidrhysthomas.co.uk/so/liststyles.html:

#taglist    {width: 50%;
        margin: 1em auto;
        padding: 0;
        }

li      {display: inline;
        margin: 0;
        padding: 0;
        }

li:before   {content: ", ";
        }

#taglist li:first-child:before
        {content: "";
        }

Хотя запятые странно плавают посреди ниоткуда, и, честно говоря, я все равно предпочитаю принятый ответ. Но просто так я не оставил ужасно сломанный ответ, я думал, что должен это исправить.

Спасибо, Якоб.

Answer 5

Так парни из A List Apart рекомендуют в своей статье « Укрощение списков »:

#taglist ul li:after {
    content: ",";
}

#taglist ul li.last:after {
    content: "";
}

Для этого требуется, чтобы последний элемент в вашем списке был помечен атрибутом class «last»:

<ul id="taglist">
  <li>apple</li>
  <li>orange</li>
  <li class="last">banana</li>
</ul>

Answer 6

Нет никакого чистого способа сделать это, совместимого с браузером (благодаря Microsoft). Я предлагаю вам сделать это с помощью серверной логики.

Вероятно, вы можете приблизиться к использованию класса last в последнем li и использовать фоновые изображения для всех lis, кроме последнего, но вы не сможете сделать: last-child и content: в IE.