Html 当 li 增加时 CSS 自动更改 ul 宽度（向左浮动）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17096010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS auto change ul width when li increase (floating left)
提问by Micah
I have a problem to auto fix UL`s width that LI can float straightly.
我有一个问题来自动修复 UL 的宽度，LI 可以直接浮动。
If I change css, set UL with a width like '1000px', not 'auto'; that what I want can be done.
如果我更改 css，请将 UL 设置为宽度'1000px'，而不是'auto'; 我想要的就可以做到。
However, is there other any settings only by CSS also can achieve same result?, because I want to auto change UL`s width as increasing number of LI.
但是，是否还有其他任何设置仅通过 CSS 也可以达到相同的结果？，因为我想随着 LI 数量的增加自动更改 UL 的宽度。
Now is like
div ul-------------------------------div ul
| /////// //////// |
| /////// li /////// li |
---------------------------------
/////// ////////
////// li /////// li
I want to be like this
div div
ul-------------------------------------------------------------ul
| /////// //////// | /////// //////// |
| /////// li /////// li | /////// li /////// li |
-------------------------------------------------------------
HTML
HTML
<div class='test'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS
CSS
.test{
width: 500px;
height: 100px;
overflow: hidden;
}
.test > ul{
list-style:none;
width: auto;
height: 100%;
background-color:#999;
display: block;
padding: 0px;
margin: 0px;
}
.test > ul > li{
float: left;
display: block;
height: 100%;
width: 180px;
background-color:#99c;
margin-right:10px;
}
Thank you very much for your advice.
非常感谢您的建议。
回答by Pevara
You could achieve this, by setting your 'li' to displayas inline-blockin stead of floating them. You should then set the white-spaceon the ul to nowrapto force them all on the same line. Something like this:
您可以通过将“li”设置为displayasinline-block而不是浮动它们来实现这一点。然后，您应该white-space将 ul 上的设置nowrap为强制它们都在同一行上。像这样的东西：
ul{
list-style:none;
white-space: nowrap;
}
ul > li{
display: inline-block;
}
You can now add as many li's as you want, and your ul will keep growing.
您现在可以根据需要添加任意数量的 li，并且您的 ul 将继续增长。
There are a few things that you should take into account when using this technique:
使用此技术时，您应该考虑以下几点：
- This might produce a horizontal scrollbar, and users hate those
- You may need to add some extra cssto make the
inline-blockwork in legacy browsers - Your
ulwidth will not exceed the width of its parent as demonstrated in the fiddle example below. Theli's are in fact overflowing their parent. Not realy a problem, but you may have to be creative when working with backgrounds on theul.
- 这可能会产生一个水平滚动条，用户讨厌那些
- 您可能需要添加一些额外的 css才能
inline-block在旧浏览器中工作 - 您的
ul宽度不会超过其父级的宽度，如下面的小提琴示例所示。的li实际上是溢出他们的父母。这不是问题，但在处理ul.
For a simple fiddle that demonstrates the technique: http://jsfiddle.net/KgyHZ/213/
对于演示该技术的简单小提琴：http: //jsfiddle.net/KgyHZ/213/
