溢出：用变量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

你的CSS的一些变化这样

.small-list { 
background-color:#797979; 
display:block; 
width:640px; /* <-- This at 640px behaves correct. I need this to be 100% though */ 
height:81px; // remove this line 
max-height:81px; // remove this line 
margin:0px; 
padding:0px; 
overflow:hidden; // add this line 
} 
ul { 
display:block; // remove this line 
float:left; 
overflow:hidden; // remove this line 
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; // remove this line 
height: 25px; 
background-color:#2b2b2b; 
border:1px solid #fff; 
line-height:1em; 
} 

Live Demo

Answer 2

你可以试试这个了。小列表格但这取决于你想如何隐藏列表。

.small-list { 
    background-color:#797979; 
    display:block; 
    width:100%; 
    height:81px; 
    max-height:81px; 
    margin:0px; 
    padding:0px; 
    overflow: hidden; 
} 

Answer 3

添加white-space: nowrap到你。小名单，改变你的float: left UL对display: inline-block的

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

但好像你真的想在这里什么是<table>。