我在容器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;
}
答案 0 :(得分:2)
将white-space: nowrap
添加到.small列表中,并将float: left
ul更改为display: inline-block
但看起来你真正想要的是<table>
。
答案 1 :(得分:0)
你的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 强> 的
答案 2 :(得分:0)
您可以尝试使用.small-list div,但这取决于您希望隐藏列表的方式。
.small-list {
background-color:#797979;
display:block;
width:100%;
height:81px;
max-height:81px;
margin:0px;
padding:0px;
overflow: hidden;
}