0

コンテナ div にいくつかのリストを並べて表示しています。コンテナ div は 100% の幅である必要があります。

コンテナー内のすべてのリストは、ブラウザーの幅を超えた場合にウィンドウからはみ出す必要があります。

これを希望どおりに機能させる唯一の方法は、コンテナに固定のピクセル幅を与えることです。

私は立ち往生しており、それは単純なものだと確信しています。

参照してください: 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;
}
4

3 に答える 3

2

white-space: nowrap.small-listに追加し、 float: leftulをdisplay: inline-block'に変更します

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

しかし、ここで本当に必要なのはです<table>。

于 2012-11-29T07:43:51.383 に答える
0

.small-list div でこれを試すことができますが、リストを非表示にする方法によって異なります。

.small-list {
  background-color:#797979;
  display:block;
  width:100%;
  height:81px;
  max-height:81px;
  margin:0px;
  padding:0px;
  overflow: hidden;
}
于 2012-11-29T07:39:45.150 に答える
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;
}

ライブデモ

于 2012-11-29T07:38:36.877 に答える