Как отобразить неупорядоченный список как встроенный, но с каждым элементом в отдельной строке, используя CSS? Пример Pic - PullRequest
Новая
       10

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

0 голосов
/ 03 ноября 2011

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

http://i43.tinypic.com/2qdokr8.jpg

Как вы должны видеть на изображении, которое я хочу стилизоватьмои неупорядоченные списки с фоном или границами, которые простираются только до текста в каждом liОднако по умолчанию значение li равно 100% ширины содержащего элемента.Я могу сделать это с помощью display: inline или display: inline-block, но тогда каждый li не начинается на отдельной строке, что не очень хорошо.

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

Не упущен ли здесь простой прием, который можно использовать для его выполнения?

1 Ответ

1 голос
/ 03 ноября 2011

Вы можете использовать clear:left; свойство здесь Вот так: 

li{
    background:red;
    float:left;
    clear:left;
    margin:10px;
}

Проверьте это http://jsfiddle.net/KebB3/

...