无序列表下降到下一行

Question

我有一个有问题的无序列表。如下所示，我将列表设置为容器的100％。问题是列表项不在同一行。第5个元素下降到下一行。列表项目设置为ul的20％，并且有5个li。假设我的数学是正确的，加起来就达到了100％。谁能看到我错在哪里？

HTML

<div class="navi">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="#">Get The<br>Facts</a></li>
        <li><a href="#">Professional<br>Education &amp; Resources</a></li>
        <li><a href="#">Understanding<br>Addiction</a></li>
        <li><a href="#">More About<br>The Blunt Truth</a></li>
    </ul>
</div>

CSS

.navi ul                                    { width:100%; }
.navi ul > li                               { background:#347311; width:20%; display:inline-block; }
.navi ul > li > a                           { font-size:20px; color: #f4f6cf; font-weight: 700; }

Answer 1

这是您需要做的事情： 将其添加到 ul ，

的CSS中

  

<强>显示：弯曲;

这是 FIDDLE

<强> CSS ：

.navi ul                                    { width:100%;display:flex; }  //change here
.navi ul > li                               { background:#347311; width:20%;display:inline-block;  }
.navi ul > li > a                           { font-size:20px; color: #f4f6cf; font-weight: 700; }

<强>更新

根据您的更新，还有另一种解决方案。 检查这个新的 FIDDLE。

您只需要使用显示属性即可。您可以查看 source 以供参考。

Answer 2

将float:left;添加到li会使它们对齐。

http://jsfiddle.net/peterdotjs/44jbt6jt/

Answer 3

将.navi ul上的字体大小更改为0px。 您的html设置方式在每个列表项之间都有空格，因此最终为20％+空格+ 20％+空格等，而不是紧密打包。

您已经在链接上设置了字体大小，因此它们不会受到影响。

<强> CSS：

.navi ul                                    { width:100%; font-size:0px; }

这对我有用，请查看我的jsfiddle作为示例。

Answer 4

使用带有内联块的LI标签之间的空格问题。它有多种解决方案。见css-tricks link

我的选择是将UL的字体大小设置为0，并为LI设置所需的字体大小，并将word-break：break-all设置为A标记。<​​/ p>

.navi ul { width:100%; font-size:0px;}
.navi ul > li { background:#347311; width:20%; display:inline-block; font-size:20px;}
.navi ul > li > a { font-size:20px; color: #f4f6cf; font-weight: 700; word-break: break-all; font-size:20px;}

<div class="navi">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="#">Get The<br>Facts</a></li>
        <li><a href="#">Professional<br>Education &amp; Resources</a></li>
        <li><a href="#">Understanding<br>Addiction</a></li>
        <li><a href="#">More About<br>The Blunt Truth</a></li>
    </ul>
</div>

希望这有帮助。

Answer 5

.navi ul            { width:100%; }
.navi ul li       { background:#347311; width:20%;float:left; display:inline-block; }
.navi ul li a  { font-size:20px; color: #f4f6cf; font-weight: 700; }

请试一试。