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


115

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

У меня вопрос: <ul>как установить вертикальный интервал между элементами списка внутри элемента?


1
ul li { margin: ???; padding: ???; line-height: ???; }все или некоторые из этих атрибутов CSS.
Брэд Кристи

Ответы:


112

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

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

в частности, используйте маржу для liэлементов, а не для ulэлемента.
Дуанев

41

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, которые позволят это сделать в старых браузерах.


1
@Layne - часть нашей работы как веб-разработчиков / программистов - предоставлять решения, которые будут работать в максимально возможном количестве сред. Ваш ответ на заданный вопрос действительно избыточен.
дезинфекция

1
Я так не думаю. Вы предоставляете решение только для той среды, на которую хотите ориентироваться, все остальное будет излишним, если вы не планируете расширяться. Плюс ко всем ответам недостатком является добавление пробела до и / или после первого / последнего элемента списка. Вопрос не в этом, он хотел иметь пробел только МЕЖДУ элементами списка (по крайней мере, он его написал). Последний элемент в других ответах будет иметь интервал после, хотя следующих элементов li нет.

Среда, с которой он работает, - это веб-браузеры. Не будет лишним предложить решение, которое работает везде. Кроме того, если вы действительно беспокоитесь о марже последнего элемента, вы бы не предложили решение, для исправления которого потребуется js. Вы можете использовать, :first-childи он будет работать во всем IE7 +
дезинфекция

4
@disinfor Я не согласен со всем. Часть стресса при веб-разработке возникает из-за поддержки браузеров, которые нас не поддерживают. Safari - одно из них. Мы должны противостоять браузерам, которые сдерживают Интернет, medium.com/@richtr/… . Наши веб-страницы должны возвращать уведомления «Мы не поддерживаем ваш браузер», а не проходить через ад, чтобы он работал везде. И нам нужно также информировать и противостоять клиентам. Или мы ничего не можем сделать и быть классными ковриками.
1,21 гигаватт,

@ 1.21gigawatts "На наших веб-страницах должно появиться сообщение" Мы не поддерживаем ваш браузер "" Ммм, нет. Это называется саботажем конкуренции и является незаконным во многих странах. Microsoft сделала это с помощью Skype для Интернета. Skype для Интернета по-прежнему отлично работает в других браузерах. Google более года делал сбой Youtube в Safari. Google запрещает пользователям Tor использовать определенные сервисы. Разве цель «веб-платформы» - сделать приложения и сервисы независимыми от платформы, например не блокировать определенные платформы? Если вы хотите это сделать, почему бы вместо этого не сделать нативные программы? В конце концов, они сильнее.
Андреас

35

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

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

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

JSFiddle


27

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


3

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


Кроме того, устаревшие теги style / style type
Бен Слейд,

2

Чтобы применить ко всему списку, используйте

ul.space_list li { margin-bottom: 1em; }

Затем в html:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

0

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


2
Вы можете привести пример своего решения?
Muldec

-9

<br>между <li></li>строковыми записями, похоже, отлично работает во всех веб-браузерах, которые я пробовал, но он не может пройти онлайн-проверку W3C CSS3. Это дает мне именно тот межстрочный интервал, который мне нужен. Насколько я обеспокоен, так как он , несомненно , работает, я сохраняющиеся в ее использовании, независимо от W3C говорит, пока кто - то может прийти с хорошей правовой альтернативы.


Ваше предложение работает нормально, если вас устраивает текущая высота строки, но я думаю, что он хочет указать свой собственный объем пространства. Используя разрывы строк, просто создайте новые строки, используя текущую высоту строки.
1,21 гигаватт,

Если вы перебираете список с большим количеством элементов, добавление br - ужасная практика. Разметка - это самый безопасный и надежный способ добавления места, как это было предложено в приведенных выше ответах.
SeaWarrior404
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.