Html 如何拉伸元素的宽度，使其 100% - 其兄弟元素的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3682649/
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 stretch the width of an element, so that it's 100% - widths of its siblings?
提问by William Niu
Say, I have the following unordered list. The button has width: auto. How do I style the elements, so #textFieldwould stretch as much as possible, so the width of #textFieldand the button would add up to 100%? I.e. #textField's width == (100% of width) - (button's computed width).
说，我有以下无序列表。按钮有width: auto。我如何设置元素的样式，以便#textField尽可能多地拉伸，以便#textField按钮的宽度加起来为 100%？即#textField的宽度 ==（宽度的 100%）-（按钮的计算宽度）。
<ul>
<li>
<input id="textField" type="text" /><input type="button" />
</li>
</ul>
So, for example, let's say 100% width of liis 100 pixels: if the button's computed width is 30px, #textField's width would be 70px; if button's computed width is 25px, #textField's width would become 75px.
因此，例如，假设 100% 的宽度li为 100 像素：如果按钮的计算宽度为 30 像素，则#textField的宽度将为 70 像素；如果按钮的计算宽度为 25px，则#textField的宽度将变为 75px。
回答by Wex
You can quickly achieve this effect using a mixture of floatand overflow: hidden:
您可以使用的混合物迅速达到这种效果float和overflow: hidden：
<ul>
<li>
<input class="btn" type="button" value="Submit"/>
<div class="inputbox"><input id="textField" type="text" /></div>
</li>
</ul>
CSS:
CSS：
ul {
list-style: none;
padding: 0; }
.btn { float: right; }
.inputbox {
padding: 0 5px 0 0;
overflow: hidden; }
.inputbox input {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
Preview (with box-sizing): http://jsfiddle.net/Wexcode/E8uHf/546/
预览（带框大小）：http: //jsfiddle.net/Wexcode/E8uHf/546/
Here is how it looks without box-sizing: http://jsfiddle.net/Wexcode/E8uHf/
这是没有盒子大小的样子：http: //jsfiddle.net/Wexcode/E8uHf/
回答by Andres Ilich
Try this:
尝试这个：
HTML
HTML
<ul>
<li>
<input id="textField" type="text" /><input value="Button!" class="btn"type="button" />
</li>
</ul>
CSS
CSS
ul li {
width:100%;
}
#textField, .btn {
float:left;
}
#textField {
width:70%;
}
.btn {
width:auto;
}
Here is a demo:
这是一个演示：
http://jsfiddle.net/andresilich/RkCvf/
http://jsfiddle.net/andresilich/RkCvf/
Here are a couple of more demos i made for your consideration.
这是我制作的更多演示供您考虑。
Thisdemo is using CSS3's flex-box model to stretch the inputfield across its region without a given width. There is no support for IE8 and below though.
该演示使用 CSS3 的 flex-box 模型input在没有给定宽度的情况下跨其区域拉伸字段。但是不支持 IE8 及以下。
And thisdemo imitates a table by only using CSS. It is supported by IE8 and above.
并且这个demo仅使用CSS来模拟表格。IE8及以上支持。
回答by PointedEars
This is possible with CSS in user agents with CSS-2.x-supporting layout engines:
这在具有CSS-2.x支持布局引擎的用户代理中使用CSS是可能的：
…
<style type="text/css">
.full-width {
width: 100%;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
</style>
</head>
<body>
<ul class="table">
<li class="row">
<span class="cell full-width">
<input type="text" id="textField" class="full-width" />
</span>
<span class="cell">
<input type="button" value="foobar" />
</span>
</li>
</ul>
</body>
Tested positive in the following browsers:
在以下浏览器中测试为阳性：
- Chromium 16.0.912.75 (Developer Build 116452 Linux), Apple WebCore 535.7
- Chromium 16.0.912.63 (Developer Build 113337 Linux), Apple WebCore 535.1
- Chromium 16.0.912.75（开发人员版本 116452 Linux）、Apple WebCore 535.7
- Chromium 16.0.912.63（开发者版本 113337 Linux）、Apple WebCore 535.1
Please note that paddings and margins on inputelements will interfere because of the fixed width.
请注意，input由于固定宽度，元素上的内边距和边距会相互干扰。
But:I can see no good reasonwhy you should notuse a tableelement here(tables and CSS domix). Semantically it would make sense (the table would be serializable), and compatibility will be very likely better than with the CSS displayproperty values above:
但是：我看没有很好的理由，为什么你应该不使用table元素在这里（表格和CSS不混合）。从语义上讲，它是有意义的（该表将是可序列化的），并且兼容性很可能比display上面的 CSS属性值更好：
<body>
<ul>
<li>
<table class="full-width"
summary="Input text field with “foobar” button">
<tr>
<td class="full-width">
<input type="text" id="textField" class="full-width" />
</td>
<td>
<input type="button" value="foobar" />
</td>
</tr>
</table>
</li>
</ul>
</body>
It is also possible that you should have used onlya tableelement herein the first place.
也有可能您应该首先在这里只使用一个table元素。
回答by William Niu
I ended up using a table and stretch the cell that contains the text field:
我最终使用了一个表格并拉伸了包含文本字段的单元格：
<ul>
<li>
<table>
<tr>
<td width="100%"><input width="100%" id="textField" type="text" /></td>
<td><input type="button" width="auto" /></td>
</tr>
</table>
</li>
</ul>
回答by Paul Sweatte
This is pretty close to the desired result:
这非常接近预期的结果：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
li { width: 100%; border: 1px solid black; display: block; text-align: justify; }
span { display: inline-block; }
span { width: 100%; }
#foo { display: inline-block; width: 90%; border: 1px solid red; }
#foo input { display: block; width: 100%; }
</style>
</head>
<ul>
<li>
<object id="foo"><input type="text"></object> <object><input type="button" value="1234567890"></object>
<span></span>
</li>
</ul>
</html>
回答by Sagar Patil
Maybe this can help, if you can define maxlength on the input box:
也许这会有所帮助，如果您可以在输入框上定义 maxlength：
/* CSS */
/* CSS */
ul{
float:left;
border:1px solid #000;
padding:0;
position:relative;
width:20%;
height:25px;
}
ul li{
float:left;
margin:0;
padding:0;
border:0;
list-style-type:none;
width:100%; height:100%;
position:relative;
}
ul li input{
margin:0; padding:0; border:0;
}
ul li input[type='text']{
float:left;
width:100%; height:100%;
text-indent:10px;
}
ul li input[type='submit']{
position:absolute; right:0;
width:auto; height:100%;
}
/* HTML */
/* HTML */
<body>
<ul>
<li>
<input type="text" /><input type="submit" value="Submit" />
</li>
</ul>
</body>
The code basically keeps the input[type='text'] to a width of 100% and positions the button absolute to the parent li. This width of the button is auto and the height is 100% to cover up the textbox. You can then set a maxlength on the textbox to prevent the text from being hidden by the button.
代码基本上将 input[type='text'] 保持为 100% 的宽度，并将按钮绝对定位到父 li。这个按钮的宽度是自动的，高度是 100% 以覆盖文本框。然后，您可以在文本框上设置 maxlength 以防止文本被按钮隐藏。
回答by roboticcss
/* ROBOTICCSS*/
/* test in ff - works*/
ul{
width: auto;
padding: 0 80px 0 0;/* right padding >= button width */
list-style:none;
}
input.text_area{
width: 100%;
}
input.submit_button{
float: right;
margin: 0 -80px 0 0;/* match above value */
}
<!--HTML -->
<ul>
<li>
<input class="text_area" type="text" />
<input class="submit_button" type="button" value="Submit"/>
</li>
</ul>
回答by Sven Bieder
Do it per javascript. take width of li minus length of button and set the width of the textbox to this. But keep the boxmodel in mind. Without javascript I have not really an idea.
按照 javascript 执行。取 li 的宽度减去按钮的长度并将文本框的宽度设置为此。但请记住盒模型。没有 javascript 我真的没有一个想法。
回答by John Robert Allan
Tables and positioning are not required at all. The answer is to float one element left, and the other right.
根本不需要表格和定位。答案是将一个元素向左浮动，另一个向右浮动。
http://jsfiddle.net/johnallan/HeUSN/
http://jsfiddle.net/johnallan/HeUSN/
HTML:
HTML：
<ul>
<li class="media attribution">
<button class="button" >Press Me</button>
<div class="copy">b blah blah blah blah blah blah blah blah blahblah blah blahblah blah blah blah blah blahblah blah blahblah blah blahblah blah blah blah blah blahlah blah blah</div>
</li>
</ul>
CSS:
CSS：
.media{ border:1px solid black }
.media, .copy{overflow:hidden; _overflow:visible; zoom:1;}
.media .button{float:left; margin-right: 10px;}
回答by Goutham
How about this?
这个怎么样？
<ul>
<li>
<input id='textField' style='width: 80%'/><input type='button' style='width: 20%'/>
</li>
</ul>
