it-swarm.com.ru

Как установить вертикальное пространство между элементами списка?

Внутри элемента <ul> очевидно, что вертикальный интервал между строками может быть отформатирован с помощью атрибута line-height.

Мой вопрос заключается в том, как установить элемент <ul> по вертикали между элементами списка?

91
Brice Coustillas

Вы можете использовать маржу. Смотрите пример:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}
97
user1633525

Я был бы склонен к этому, который имеет силу поддержки IE8.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

31
Paulie_D

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

Правка: Если вы не используете специальный случай для последнего элемента li, ваш список будет иметь небольшой интервал, который вы можете увидеть здесь: http://jsfiddle.net/wQYw7/

Теперь сравните это с моим решением: http://jsfiddle.net/wQYw7/1/

Конечно, это не работает в старых браузерах, но вы можете легко использовать расширения js, которые включат это для старых браузеров.

30
user238801

Добавьте margin к своим li тегам. Это создаст пространство между li, и вы можете использовать line-height, чтобы установить интервал для текста внутри тегов li.

26
disinfor

установка padding-bottom для каждого списка с использованием псевдокласса является жизнеспособным методом. Также можно использовать высоту линии. Помните, что свойства шрифта, такие как font-family, Font-weight и т.д., Играют роль для неравномерных высот.

0
Rishi jung

Во многих случаях при создании почтовых сообщений в формате HTML нельзя использовать таблицы стилей или блоки стилей/стилей. Все CSS должны быть встроенными. В случае, если вы хотите настроить расстояние между пулями, я использую li style = "margin-bottom: 8px;" в каждом пункте пули. Настройте значение пикселей по своему вкусу.

0
Malcolm Stone