GOOGLE ADS

пятница, 6 мая 2022 г.

Горизонтальный список, который переносится без перекрытия

Я пытаюсь создать список (UL), который отображается горизонтально. Каждый элемент имеет некоторые отступы вокруг него. Проблема, с которой я сталкиваюсь, заключается в том, что когда список доходит до конца строки и начинает переноситься на следующую строку, он не отображается достаточно низко и начинает перекрывать первую строку. Может ли кто-нибудь помочь мне понять, как заставить перенос перейти к следующей строке без перекрытия?

Вот CSS

.letterlist ul {
margin: 0; padding: 0;
list-style-type: none; list-style-image: none;
}
.letterlist li
{
display:inline;
}
.letterlist li a
{
margin: 4px;
color:#eee;
padding: 10px 20px;
background:#3c66ad;
font-size:16px;
font-weight: bold;
border-radius: 5px;
}

Вот HTML

<p>
<ul class="letterlist">
<li><a href="/list/A">A</a></li>
<li><a href="/list/B">B</a></li>
<li><a href="/list/C">C</a></li>
<li><a href="/list/D">D</a></li>
<li><a href="/list/E">E</a></li>
<li><a href="/list/F">F</a></li>
<li><a href="/list/G">G</a></li>
<li><a href="/list/H">H</a></li>
<li><a href="/list/I">I</a></li>
<li><a href="/list/J">J</a></li>
<li><a href="/list/K">K</a></li>
<li><a href="/list/L">L</a></li>
<li><a href="/list/M">M</a></li>
<li><a href="/list/N">N</a></li>
<li><a href="/list/O">O</a></li>
<li><a href="/list/P">P</a></li>
<li><a href="/list/Q">Q</a></li>
<li><a href="/list/R">R</a></li>
<li><a href="/list/S">S</a></li>
<li><a href="/list/T">T</a></li>
<li><a href="/list/U">U</a></li>
<li><a href="/list/V">V</a></li>
<li><a href="/list/W">W</a></li>
<li><a href="/list/X">X</a></li>
<li><a href="/list/Y">Y</a></li>
<li><a href="/list/Z">Z</a></li>
</ul>
</p>

Я использую blueprint CSS, если это имеет значение.


Решение проблемы

Вы можете либо плавать по всем liэлементам, либо дать им display: inline-block, а затем задать им некоторое верхнее и нижнее поле:

.letterlist li {
float: left;
/* or */
display: inline-block;
margin: 20px 0;
}

См. http://www.jsfiddle.net/yijiang/z8Gfe/ для простого примера. И кстати, элементы в абзацах ulнедействительныp

Комментариев нет:

Отправить комментарий

Laravel Datatable addColumn returns ID of one record only

Я пытаюсь использовать Yajra Datatable для интеграции DataTable на свой веб-сайт. Я смог отобразить таблицу, но столкнулся с проблемой. В по...