Question

我在ul盒子里有7个li，每个都有20％的宽度，这意味着它需要140％的宽度所以我必须用css和水平溢出来设置它。但在我的情况下它只显示4 li而其他隐藏没有滚动！什么是在一行中显示所有li的解决方案！？

<style>
#list1 > li {
list-style-type: none;width:20%;
height:195px;border:1px solid gray;
float:left;margin:2px;text-align: center;
}
</style>
<ul style='border:1px solid red;width:90%;height:215px;overflow-x:scroll;overflow-y:hidden;' id=list1>

<li>
<b>ocr 1</b><br />
</li>
<li >
<b>ocr 100</b><br />
</li>
<li >
<b>ocr 1000</b><br />
</li>
<li >
<b>ocr 2000</b><br />
</li>
<li >
<b>ocr 5000</b><br />
</li>
<li >
<b>ocr 10000</b><br />
</li>    
<li >
<b>ocr 15000</b><br />
</li>
</ul>

Answer 1

您需要从float中删除LI并更新您的CSS以包含以下内容。这会将您的LI元素设置为内联元素，以便它们相互跟随，并在white-space:nowrap;上设置UL将阻止它们包装并创建您需要的溢出行为。

   #list1 {
        white-space:nowrap;
    }
    #list1 > li {
        display:inline-block;
        ...

以下是JSFiddle的更新，其中包括一些进一步的调整，例如从UL移除填充以将所有框移到左侧。

Answer 2

#list1 {
    white-space:nowrap;
    padding:0;
    border:1px solid red;
    width:90%;
    height:215px;
    overflow:scroll;
}
#list1 > li {
    list-style-type:none;
    width:20%;
    height:195px;
    border:1px solid gray;
    margin:2px;
    text-align: center;
    display:inline-block;
}

有些错误表明，20％宽度的li元素中的7个并不意味着它需要总宽度的140％。还应考虑ul元素填充，li元素边距，边界等。

排列列表元素水平溢出

2 个答案: