溢出：以可变 100% 宽度隐藏答案

【问题标题】：overflow:hidden with variable 100% width溢出：以可变 100% 宽度隐藏
【发布时间】：2012-11-29 07:29:51
【问题描述】：

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

如果容器中的任何列表超出浏览器宽度，则它们应溢出窗口。

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

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

.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;
}

【问题讨论】：

标签： css width overflow floating nowrap

【解决方案1】：

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

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

但您在这里真正想要的是<table>。

【讨论】：

【解决方案2】：

像这样对你的 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

【讨论】：

【解决方案3】：

您可以为 .small-list div 尝试此操作，但这取决于您希望如何隐藏列表。

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

【讨论】：