Question

我正在尝试创建一个水平显示的列表（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>

如果重要的话，我正在使用蓝图CSS。

Answer 1

您可以浮动所有li元素或给它们display: inline-block，然后给它们一些上下边距：

.letterlist li {
    float: left; 
       /* or */ 
    display: inline-block;

    margin: 20px 0;
}

有关简单示例，请参阅：http://www.jsfiddle.net/yijiang/z8Gfe/。顺便说一下，ul段中的p元素无效

Answer 2

可以使用弹性盒简化江一的答案

.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>

包装没有重叠的水平列表

2 个答案: