Html 如何在 CSS 中并排获得两个表单字段，每个字段的标签都在字段上方？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4907275/
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 get two form fields side-by-side, with each field’s label above the field, in CSS?
提问by sea_1987
I am stuck on figuring out some css, I need a section of my form to look like the following,
我一直在想一些 css，我需要我的表单的一部分看起来像下面这样，
I have tried every variation I can think of,
我尝试了所有我能想到的变化，
I have given the labels a fixed width and floated them left, then given the inputs the same width and floated them left.
我给标签一个固定的宽度并将它们向左浮动，然后给输入相同的宽度并将它们向左浮动。
I am all out of ideas, how can I achieve this please?
我完全没有想法，请问我该如何实现？
采纳答案by Scott Brown
<form>
<label for="company">
<span>Company Name</span>
<input type="text" id="company" />
</label>
<label for="contact">
<span>Contact Name</span>
<input type="text" id="contact" />
</label>
</form>
label { width: 200px; float: left; margin: 0 20px 0 0; }
span { display: block; margin: 0 0 3px; font-size: 1.2em; font-weight: bold; }
input { width: 200px; border: 1px solid #000; padding: 5px; }
Illustrated at http://jsfiddle.net/H3y8j/
回答by Paul D. Waite
You need an HTML element for each column in your layout.
布局中的每一列都需要一个 HTML 元素。
I'd suggest:
我建议：
HTML
HTML
<div class="two-col">
<div class="col1">
<label for="field1">Field One:</label>
<input id="field1" name="field1" type="text">
</div>
<div class="col2">
<label for="field2">Field Two:</label>
<input id="field2" name="field2" type="text">
</div>
</div>
CSS
CSS
.two-col {
overflow: hidden;/* Makes this div contain its floats */
}
.two-col .col1,
.two-col .col2 {
width: 49%;
}
.two-col .col1 {
float: left;
}
.two-col .col2 {
float: right;
}
.two-col label {
display: block;
}
回答by nico
回答by limc
How about something like this?
这样的事情怎么样？
<div id="leftContainer">
<span>Company Name</span>
<br><input type="text" value="John Lewis Partnership">
</div>
<div id="rightContainer">
<span>Contact Name</span>
<br><input type="text" value="Timothy Patten">
</div>
Then, you can align the 2 divs by floating them left and right:-
然后，您可以通过左右浮动来对齐 2 个 div：-
#leftContainer {
float:left;
}
#rightContainer {
float:right;
}
回答by gunwin
<div>
<div style="float:left; width:101px; height:auto;">
<div style="width:200px; float:left;">
LabelText
</div>
<div style="width:200px; float:left;">
<input type="text" name="textfield" id="textfield" />
</div>
</div>
<div style="float:left; width:101px; height:auto;">
<div style="width:200px; float:left;">
LabelText
</div>
<div style="width:200px; float:left;">
<input type="text" name="textfield" id="textfield" />
</div>
</div>
</div>
回答by Ricky Freeman
This worked perfectly for me without css. I think css would put some icing on the cake though.
在没有 css 的情况下，这对我来说非常有效。我认为 css 会锦上添花。
<form>
<label for="First Name" >First Name:</label>
<input type="text" name="username" size="15" maxlength="30" />
<label for="Last Name" >Last Name:</label>
<input type="text" name="username" size="15" maxlength="30" />
</form>
回答by Ross
Give this a try
试试这个
<style type="text/css">
form {width:400px;}
#text1 {float:right;}
#text2 {float:left;}
</style>
then
然后
<form id="form1" name="form1" method="post" action="">
<label id="text1">Company Name<br />
<input type="text" name="textfield2" id="textfield2" />
</label>
<label id="text2">Contact Name<br />
<input type="text" name="textfield" id="textfield" />
</label>
</form>
Test Page:http://jsbin.com/ahelo4
测试页面：http : //jsbin.com/ahelo4
Works for me in the latest versions of Firefox, Safari, Chrome, Opera. Not 100% sure about IE though as im on a Mac, but I cant see why it wouldn't :)
在最新版本的 Firefox、Safari、Chrome、Opera 中对我有用。虽然我在 Mac 上对 IE 不是 100% 确定，但我不明白为什么它不会:)
