html - 超出列表项出现在同一行

Question

我已经创建了像这样的列表项

<ul class="list">
<li>A</li>
...
...
<li>Z</li>
</ul>

CSS 是

.list
{
border-bottom: 1px solid #ddd;
display: inline-block;
overflow: hidden;
position: relative;
height: 42px;
clear: left;
width: 100%;
}
.list li
{
float: left;
overflow: hidden;
}

页面结束后。例如，A 到 M 在同一行，剩下的字母 N 到 Z 到下一行。但它是隐藏的。

我希望 A 到 Z 在同一条线上。但在 M 之后，字符将被隐藏。

Answer 1

而不是 float 你的 li s 在左边，你应该把它们做成 display:inline这样他们仍然遵守 ul 的布局规则.

.list {
  border-bottom: 1px solid #ddd;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 42px;
  clear: left;
  width: 100%;
}
.list li {
  display: inline;
  overflow: hidden;
}

<div style="width:200px;">
    <ul class="list"><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li><li>I</li><li>J</li><li>K</li><li>L</li><li>M</li><li>N</li><li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li><li>U</li><li>V</li><li>W</li><li>X</li><li>Y</li><li>Z</li></ul>
</div>