Html 如何使跨度和输入彼此相邻并共同占据包含 div 宽度的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6526970/
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 can I make a span and an input sit next to each other and collectively take up 100% of the width of the containing div?
提问by Thiago
I have the following snippet:
我有以下片段：
<html>
<body>
<div style="width: 700px;">
<span>test</span>
<input style="width: 100%;"></input>
</div>
</body>
</html>
But this doesn't do what I want. I wanted that span and input together would account for 100% of the div i.e. that input would start right where the span ends and fill until the width of the div, without breaking to the next line. How do I do that?
但这不符合我的要求。我希望跨度和输入一起占 div 的 100%，即输入将从跨度结束的地方开始并填充到 div 的宽度，而不会中断到下一行。我怎么做？
采纳答案by thirtydot
If you need proper fluid width:
如果您需要适当的流体宽度：
See:http://jsfiddle.net/kxEML/
见：http : //jsfiddle.net/kxEML/
CSS:
CSS：
.inputContainer {
width: 300px;
border: 1px dashed #f0f
}
.inputContainer label {
float: left;
margin-right: 5px;
background: #ccc
}
.inputContainer div {
overflow: hidden;
}
.inputContainer input {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block
}
HTML:
HTML：
<div class="inputContainer">
<label>test</label>
<div><input /></div>
</div>
回答by David Laberge
Of course it does not work. You input takes all the 700px.
当然这是行不通的。您输入的所有 700 像素。
<div style="width: 700px;">
<span style="width:20%">test</span>
<input style="width: 80%;"></input>
</div>
That should work better.
那应该效果更好。
回答by Sotiris
Using width:100%for inputwill make it 700px. Adding the required width of the text, make the row biggest, as a result the inputgoes to the next line. So you could change the widthof inputto 95%to fit the line.
使用width:100%forinput会成功700px。添加所需的文本宽度，使行最大，因此input转到下一行。所以，你可以改变width的input，以95%适应行。
Demo:http://jsfiddle.net/q75C8/
演示：http : //jsfiddle.net/q75C8/
An alternative solution, using jQuery could be the following:
使用 jQuery 的替代解决方案可能如下：
$("input").width(($("div").width()-10)-$("span").width());
Demo:http://jsfiddle.net/q75C8/2/
演示：http : //jsfiddle.net/q75C8/2/
P.S Remove </input>, is not required.
PS Remove </input>，不是必需的。
回答by Gordon Gustafson
Just set them so their width totals around 100% and floatthem next to each other. In your snippet, the inputtakes up 100% of the div, so the span has to go above it. In order for them to be able to wit on the same line, they have to have a total length of less than 100% or 700px to fit in the div. Setting the floatproperty tell the browser to both make them as flush left as possible, and since they can fit, they end up next to each other on the same line. :D
只需设置它们，使它们的宽度总计约为 100%，并且float它们彼此相邻。在您的代码段中，input占据 div 的 100%，因此跨度必须高于它。为了让他们能够在同一条线上发挥智慧，他们的总长度必须小于 100% 或 700px 以适应 div。设置float属性告诉浏览器让它们尽可能地向左对齐，并且由于它们可以容纳，它们最终在同一行上彼此相邻。:D
<html>
<body>
<div style="width: 700px;">
<span style="width: 49%; float: left; background-color: blue;">test</span>
<input style="width: 49%; float: left; background-color: green;"></input>
</div>
</body>
</html>
回答by Will Martin
Try something like this:
尝试这样的事情：
<html>
<head>
<style type="text/css">
div { width: 700px; }
label { display: block; text-align: right; }
label > input { width: 50%; }
</style>
</head>
<body>
<div>
<label for="user-name">User Name: <input name="user" id="user-name" /></label>
</div>
</body>
</html>
Using a LABEL instead of a SPAN makes it work smoothly for the blind.
使用 LABEL 而不是 SPAN 可以让盲人顺利工作。
Setting "display: block" on the LABEL makes it expand to 100% of the width of its container (the DIV), and start on a line by itself.
在 LABEL 上设置“display:block”使其扩展到其容器（DIV）宽度的 100%，并从一行开始。
Setting "width: 50%" on the INPUT makes it take up half of the LABEL's width.
在 INPUT 上设置“width: 50%”使其占据 LABEL 宽度的一半。
The "text-align: right" makes the label's text sit flush against the beginning of the INPUT.
"text-align: right" 使标签的文本与 INPUT 的开头齐平。
EDIT: Oh, and note that the FOR attribute of the LABEL refers to the ID of the INPUT, not to its NAME. Edited example to clarify that.
编辑：哦，注意 LABEL 的 FOR 属性指的是 INPUT 的 ID，而不是它的 NAME。编辑示例以澄清这一点。
回答by b_dubb
<html>
<style type="text/css">
.left {
float:left;
width:15%;
margin:0px auto;
padding:0px;
}
.right {
float:right;
width:85%;
margin:0px auto;
padding:0px;
}
.clearthis {
width:100%;
margin:0px auto;
padding:0px;
clear:both;
}
</style>
<body>
<div style="width: 700px;">
<div class="left">
<span>test</span>
</div>
<div class="right">
<input style="width: 100%;"></input>
</div>
<div class="clearthis"></div>
</div>
</body>
</html>
something like this should work
这样的事情应该工作
回答by Thiago
I got it using tables:
我是用表格得到的：
<html>
<body>
<div style="width: 700px;">
<table border="0" style="width: 100%;">
<tr>
<td><span>test</span></td>
<td style="width: 100%;"><input style="width: 100%;"></input></td>
</tr>
</table>
</div>
</body>
</html>
回答by shamsieh76
An alternative to Div and CSS is to use the table :
Div 和 CSS 的替代方法是使用 table ：
<table>
<tr>
<td><span>Username</span></td>
<td><input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</td>
</tr>
<tr>
<td><span>Password</span></td>
<td><input id="password" name="password" value="" type="password" placeholder="Password">
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Login</button>
</td>
</tr>
</table>
