无重叠换行的水平列表
无重叠换行的水平列表
提问于 2011-01-23 16:34:09
我正在尝试创建一个水平显示的列表(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。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-01-23 16:44:36
你可以浮动所有的li元素，或者给它们display: inline-block，然后给它们一些上边距和下边距：
.letterlist li {
float: left;
/* or */
display: inline-block;
margin: 20px 0;
}有关简单的示例，请参阅：http://www.jsfiddle.net/yijiang/z8Gfe/。顺便说一句，ul元素在p段落中是无效的
Stack Overflow用户
发布于 2019-05-31 22:09:24
奕江的答案可以通过使用flex box来简化
.letterlist {
display: flex;
flex-wrap: wrap;
}
.letterlist a {
margin: 10px 4px;
color:#eee;
padding: 10px 20px;
background:#3c66ad;
font-size:16px;
font-weight: bold;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}<div class="letterlist">
<a href="/list/A">A</a>
<a href="/list/B">B</a>
<a href="/list/C">C</a>
<a href="/list/D">D</a>
<a href="/list/E">E</a>
<a href="/list/F">F</a>
<a href="/list/G">G</a>
<a href="/list/H">H</a>
<a href="/list/I">I</a>
<a href="/list/J">J</a>
<a href="/list/K">K</a>
<a href="/list/L">L</a>
<a href="/list/M">M</a>
<a href="/list/N">N</a>
<a href="/list/O">O</a>
<a href="/list/P">P</a>
<a href="/list/Q">Q</a>
<a href="/list/R">R</a>
<a href="/list/S">S</a>
<a href="/list/T">T</a>
<a href="/list/U">U</a>
<a href="/list/V">V</a>
<a href="/list/W">W</a>
<a href="/list/X">X</a>
<a href="/list/Y">Y</a>
<a href="/list/Z">Z</a>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4772943
复制相关文章
相似问题