Html 如何仅使用 CSS 使孩子自动适应父母的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5858108/
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
How to make children auto fit parent's width only with CSS?
提问by Erick Petrucelli
I have a server-side component that generates a fluid layout "toolbar" using DIVwithout fixed width, generating many Ainside it.
我有一个服务器端组件，它使用DIV没有固定宽度的方式生成一个流畅的布局“工具栏” ，A在其中生成许多。
Then I need customize that layout to make all Atags auto fit to the parent width. But the number of children is variable and the parent's width isn't known (it auto fits itself to the window).
然后我需要自定义该布局以使所有A标签自动适应父宽度。但是孩子的数量是可变的，父母的宽度是未知的（它自动适应窗口）。
I made some tests with this Fiddle: http://jsfiddle.net/ErickPetru/6nSEj/1/
我用这个小提琴做了一些测试：http: //jsfiddle.net/ErickPetru/6nSEj/1/
But I can't find a way to make it dynamic (uncomment the last Atag to see how it ins't working, lol).
但我找不到让它动态的方法（取消最后一个A标签的注释，看看它是如何不起作用的，哈哈）。
I can't change the server-side sources to gerenate HTML with fixed width. And I really would like to solve it only with CSS if there is any way, even that with JavaScript I could achieve that result.
我无法更改服务器端源以生成具有固定宽度的 HTML。如果有任何办法，我真的很想只用 CSS 来解决它，即使是用 JavaScript 也能达到那个结果。
How can I make all the children auto-fit itself to the parent's width independently of the number of children?
如何让所有孩子自动适应父母的宽度而与孩子的数量无关？
采纳答案by Erick Petrucelli
This is already a pretty old question. Although the answers given attended well at the time, nowadays the Flexible Box Layoutoffers the same result with much more simplicity, with good supportin all modern browsers. I strongly recommend it!
这已经是一个很老的问题了。尽管当时给出的答案很受欢迎，但现在灵活框布局提供了相同的结果，而且更加简单，并且在所有现代浏览器中都得到了良好的支持。我强烈推荐它！
/* Important parts */
.parent {
display: flex;
}
.parent a {
flex: 1;
}
/* Decoration */
.parent {
padding: 8px;
border: 1px solid #ccc;
background: #ededed;
}
.parent a {
line-height: 26px;
text-align: center;
text-decoration: none;
border: 1px solid #ccc;
background: #dbdbdb;
color: #111;
}<div class="parent">
<a href="#">Some</a>
<a href="#">Other</a>
<a href="#">Any</a>
</div>
<br>
<div class="parent">
<a href="#">Some</a>
<a href="#">Other</a>
<a href="#">Any</a>
<a href="#">One More</a>
<a href="#">Last</a>
</div>回答by thirtydot
You can use display: table-cell:
您可以使用display: table-cell：
See:http://jsfiddle.net/6nSEj/12/(or with 5 children)
请参阅：http : //jsfiddle.net/6nSEj/12/ （或有 5 个孩子）
This won't work in IE7 because that browser simply doesn't support display: tableand friends.
这在 IE7 中不起作用，因为该浏览器根本不支持display: table和朋友。
div.parent {
..
width: 100%;
display: table;
table-layout: fixed;
}
div.parent a {
..
display: table-cell;
}
回答by Piotr Kula
For now many use jQuery as a solution to this problem. All you need is one line. This is from your fiddle.
现在很多人使用 jQuery 作为这个问题的解决方案。您只需要一条线。这是来自你的小提琴。
$("div.parent a").css("width", (($("div.parent").width() / $("div.parent a").length ) -2) + "px");
