超出列表项进来同一行

我已经创建列表的项目，如超出列表项进来同一行

<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之后，角色将被隐藏。

来源

2014-10-27 Mohaideen Ismail

先给'高度：42PX;'你LIS为好。由于父级具有“overflow：hidden”，所以应该这样做。 – techfoobar 2014-10-27 09:08:10

没有同样的事情发生 – 2014-10-27 09:09:56

你为什么要这样？你的目的是什么？我相信有更好的选择。 – Nick 2014-10-27 09:11:34

而不是将您的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>

来源

2014-10-27 09:12:09 Rhumborl

超出列表项进来同一行

回答

相关问题