css - 溢出:以可变的 100% 宽度隐藏

Question

我在容器 div 中有一些并排列表。容器 div 的宽度需要为 100%。

如果容器内的任何列表超过浏览器宽度，它们都应该溢出窗口。

如果我给容器一个固定的 px 宽度，我可以让它按预期工作的唯一方法。

我被卡住了，我确信这很简单。

请参阅:http://jsfiddle.net/sPKEp/7/

.small-list {
background-color:#797979;
display:block;
width:640px; /* <-- This at 640px behaves correct. I need this to be 100% though */
height:81px;
max-height:81px;
margin:0px;
padding:0px;
}
ul {
display:block;
float:left;
overflow:hidden;
height:81px;
max-height:81px;
width: 100px;
list-style-type: none;
padding: 0px;
margin: 0 5px 0 5px;
background-color:#c9c9c9;
}
li {
display:block;
padding:0px;
width: 100px;
height: 25px;
background-color:#2b2b2b;
border:1px solid #fff;
line-height:1em;
}

Answer 1

添加white-space: nowrap到您的 .small-list 并更改您的 float: left ul 到 display: inline-block的

http://jsfiddle.net/sPKEp/30/

但看起来你真正想要的是 <table> .