CSS：子元素的动态宽度适合父元素宽度
在编写 CSS 时，我总是发现自己缺少浮动子元素的自动子宽度功能，以使它们的总宽度适合父级的宽度。
事实上，我发现在 Google 搜索框中很难表达，所以你可以考虑这个例子：
一个ul包含四个lili 有 float: left; list-style: none; 并且由于有四个 li 元素，因此每个元素都有 width: 25%;
如果我想让 li 元素的数量可变，而不是固定的 4，那么当 li 元素 li 的宽度为 < em>五个，或者如果它们是十，则宽度为10％，或者当它们是两个时，宽度为50％等等。？鉴于 ul 始终具有明确的固定宽度。
When writing CSS, I always find myself missing auto child width feature of floated child elements, to fit their total width to the parent's width.
In fact I find it hard to phrase in Google search box, so you may consider this example:
A ul contains four lili has float: left; list-style: none; and because there are four li elements, each has width: 25%;
What if I want to make the number of li elements variable, instead of fixed four, so li gets width of 20% when they are five, or gets width of 10% if they are ten, or width of 50% when they are two etc..? Given that the ul has an explicit fixed width always.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您也许可以使用 css3 的 flex-box。
这是一个 jsfiddle 来演示（您可能需要将 -webkit 更改为 -moz 或 -o） http://jsfiddle.net/ wKKte/
You might be able to use css3's flex-box.
Here's a jsfiddle to demonstrate(you may need to change -webkit to -moz or -o) http://jsfiddle.net/wKKte/
尝试显示：表格；
这是一个小提琴：
http://jsfiddle.net/7D5cM/
Try display: table;
Here's a fiddle with it:
http://jsfiddle.net/7D5cM/