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

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

Например, следующий список должен отображаться как 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?

Ответы

Ответ 1

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

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

Ответ 2

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

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

с просто другой

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

Плюсы:

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

Ответ 3

Это зависит от реализации браузера, но это должно сработать. Хотя он полагается на first-child, что может ограничить его использование, но по существу помещает запятую ", " перед элементом списка, а не после. Я не уверен, как это повлияет на padding/margin, но если вы используете `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: "";
        }

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

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

Ответ 4

Легко с CSS3 вы можете использовать псевдоселектор last-child и not сразу:

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

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

Ответ 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>

Ответ 6

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

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