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

不应将li向左浮动，而应将其设为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>

超出列表项目在同一行

1 个答案: