CSS：内联元素拉伸以填充容器的可用水平空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/989859/
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: Inline element stretch to fill available horizontal space of container
提问by ChrisInCambo
For example I have a 200px div containing three buttons, the text is only minimal so the buttons don't fill the horizontal space available. Is it possible to..
例如，我有一个包含三个按钮的 200px div，文本很小，因此按钮不会填充可用的水平空间。是否有可能..
Make the last button stretch to occupy all the remaining space?
The First button to stretch to fill the remaining space pushing the last two buttons along?
The middle button to stretch to fill the remaining space pushing the last button along?
使最后一个按钮拉伸以占据所有剩余空间？
拉伸以填充剩余空间的第一个按钮推动最后两个按钮？
中间按钮拉伸以填充剩余空间，推动最后一个按钮？
回答by SpliFF
I've realised that the real issue is buttons won't stretch until you give them an explicit width (ie, width:100%). You still need the table-cells though to constrain that 100% to a 'what will fit' model. You could just set 33% on each button but that won't work if your buttons are being added dynamically (unless you calculate the percentages on the server).
我意识到真正的问题是按钮在你给它们一个明确的宽度（即宽度：100%）之前不会拉伸。您仍然需要表格单元格来将 100% 限制为“适合什么”的模型。您可以只在每个按钮上设置 33%，但如果您的按钮是动态添加的（除非您计算服务器上的百分比），那么这将不起作用。
METHOD 1 (doesn't work): Buttons don't expand to fit the row (ie, display:table-cell appears to be ignored).
方法 1（不起作用）：按钮不会扩展以适应行（即 display:table-cell 似乎被忽略）。
<div style="display:table;width:200px">
<div style="display:table-row">
<button style="display:table-cell">1</button>
<button style="display:table-cell">2</button>
<button style="display:table-cell">3</button>
</div>
</div>
For IE prior to IE8 you'll need to feed a real table or a compatibility script like IE8-js. The basic concept is easy enough though:
对于 IE8 之前的 IE，您需要提供一个真实的表或像 IE8-js 这样的兼容性脚本。不过，基本概念很简单：
<!--[if ie lt 8]>
<script><!--pseudo-code, not real js-->
for (el in getElementsByTagName('button')) {
if el.style.find('display:table-cell') {
el.innerHTML = '<td><button>'+el.innerHTML+'</button></td>'
}
}
</script>
<![endif]-->
METHOD 2 (works): Hmmm.. Well for whatever reason the display:table-cell style does not work on button elements. I was able to do it with some extra markup though.
方法 2（有效）：嗯……不管什么原因，display:table-cell 样式在按钮元素上都不起作用。不过，我可以用一些额外的标记来做到这一点。
<div style="display:table;width:500px;">
<div style="display:table-row">
<div style="display:table-cell"> <button style="width:100%">1938274</button> </div>
<div style="display:table-cell"> <button style="width:100%">2</button> </div>
<div style="display:table-cell"> <button style="width:100%">3</button> </div>
</div>
</div>
I admit it ain't pretty but it will ensure all of the horizontal space is filled. It can be cleaned up a bit by using classes like in this demoI put together. Still, when combined with IE's shortcomings this is probably a case where I'd say ignore the purists and just use a table:
我承认它不漂亮，但它会确保所有的水平空间都被填满。可以使用我放在一起的这个演示中的类来清理它。尽管如此，当结合 IE 的缺点时，这可能是我会说忽略纯粹主义者而只使用表格的情况：
<style>table button {width:100%}</style>
<table style="width:500px;">
<tr> <td><button>1938274</button> <td> <button>2</button> <td> <button>3</button> </tr>
</table>
回答by Ryan Florence
Similar to Roberts:
类似于罗伯茨：
HTML
HTML
<div id="container">
<button id="one">One</button><button id="two">Two</button><button id="three">Three</button>
</div>
CSS
CSS
div#container {
border: solid 1px;
width: 200px;
}
div#container button {
width: 33%;
}
div#container button:last-child {
width: 34%;
}
That doesn't allow for a fluid layout: #container width must be known, then you do the math.
这不允许流体布局：#container 宽度必须已知，然后您进行数学计算。
To allow for a fluid layout you need to hop into the world of absolute positioning:
为了实现流畅的布局，您需要跳入绝对定位的世界：
div#container {
border: solid 1px;
width: 50%; /* resize your browser window to see results */
position: relative;
}
div#container button {
position: absolute;
width: 50px;
}
button#one {
top: 0;
left: 0;
}
button#two {
top: 0;
left: 55px;
}
button#three {
width: auto !important; /* get rid of the 50px width defined earlier */
top: 0;
left: 110px;
right: 0px;
}
Watch out for the height of #container. It's gone since all it's children in this example are absolutely positioned--you can see that from the border.
注意#container 的高度。它已经消失了，因为在这个例子中它的所有孩子都是绝对定位的——你可以从边界看到。
回答by Robert Groves
Can't you just set the widths like so...
你不能像这样设置宽度吗...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test css button stretch</title>
<style>
#btn_container
{
width: 200px;
}
#btn_container button
{
width: 20%;
}
#btn_container button.stretch
{
width: 58%;
}
</style>
</head>
<body>
<div id="btn_container">
<p>last button stretch...</p>
<button type="button">eat</button>
<button type="button">drink</button>
<button class="stretch" type="button">sleep</button>
<br>
<p>first button stretch...</p>
<button class="stretch" type="button">eat</button>
<button type="button">drink</button>
<button type="button">sleep</button>
<br>
<p>middle button stretch...</p>
<button type="button">eat</button>
<button class="stretch" type="button">drink</button>
<button type="button">sleep</button>
</div>
</body>
</html>
This seems to get the desired effect, is fluid (if the div button container's width is changed or set to a %), and works in IE, Firefox and Opera.
这似乎得到了预期的效果，是流畅的（如果 div 按钮容器的宽度更改或设置为 %），并且适用于 IE、Firefox 和 Opera。
edit: removed the redundant btn class; bumped up the width % for the stretch class; added the doctype. Left the types on, could technically haved removed for just an example, but meh.
编辑：删除了多余的 btn 类；提高了拉伸类的宽度 %；添加了文档类型。保留类型，技术上可以删除只是一个例子，但是meh。
@rpflo: the types are in there because my buttons in this example are not submit buttons. If these were part of a form and were submitting, I'd have left them off since the default is type=submit. (W3C HTML BUTTON)
@rpflo：类型在那里，因为我在这个例子中的按钮不是提交按钮。如果这些是表单的一部分并且正在提交，我会忽略它们，因为默认值为 type=submit。( W3C HTML 按钮)
