Как добавить пустые строки между элементами упорядоченного списка?
В настоящее время у меня есть следующий HTML:
<ol>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ol>
Это дает обычный результат:
- Фу
- Бар
- Баз
Я хотел бы добавить пустую строку между каждым элементом списка, чтобы вывод выглядел следующим образом:
- Фу
- Бар
- Баз
Это можно сделать, добавив два тега <br> перед каждым закрывающим тегом </li>. Однако это некрасиво и некрасиво.
Есть ли лучший способ добиться того же результата в HTML или CSS?
Ответы 6
Вы можете увеличить поля или отступы для каждого li по своему вкусу. например.
li {
margin-bottom: 1rem;
}
Ага. И если вас беспокоит место после последнего, вы можете использовать li:not(:last-child)
вы добавляете отступы в olli
ol li{
padding:10px;
}<ol>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ol>вы можете увеличить свой отступ li с учетом ваших требований
Попробуй это
.mylist> li{
margin-bottom:15px;
}<ol class = "mylist">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ol>можно попробовать увеличить высоту строки
li {
line-height: 30px;
}
взгляните на скрипку
https://jsfiddle.net/thanseeh/rh7vqL96/2/
Однако, если позиция переносится, этот интервал также повлияет на позицию внутри.
Вы можете использовать тег pre. Нет необходимости в css
<ol>
<pre>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</pre>
</ol>Вы можете использовать заполнение, чтобы добавить пустое пространство между каждым элементом.
<ol class = "myclass">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ol>
.myclass li{
padding-bottom: 20px;
}
.myclass li:last-child{
padding-bottom: 0px;
}
Вы можете добавить поля или отступы с помощью CSS.