Html CSS 将文本框与标签对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19714274/
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 aligning text boxes with labels
提问by user1
My fiddle pretty much shows the problem. Trying to get the labels to be on the left side of each text box if anyone could help. http://jsfiddle.net/HC64Y/
我的小提琴几乎显示了这个问题。如果有人可以提供帮助，尝试将标签放在每个文本框的左侧。http://jsfiddle.net/HC64Y/
<div id="boxalign2" class="boxalign2" >
<label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />
<label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>
<label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>
css
css
input.rounded2 {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 20px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
float: left;
display: inline-block;
clear: left;
width: 150px;
text-align: right;
}
回答by Jeff B
You are making your inputs inline-block, but you are also floating them to the left.
您正在输入inline-block，但您也将它们浮动到左侧。
If you remove the float: leftand add <br>after each input, you will get the correct behavior.
如果您在每个输入之后删除float: left和添加<br>，您将获得正确的行为。
To align the boxes, add a divwrapper around each label/input, make your label inline-blockwith a fixed width. There are other ways to do this as well, but this is one way.
要对齐框，请div在每个标签/输入周围添加一个包装器，使标签inline-block具有固定宽度。还有其他方法可以做到这一点，但这是一种方法。
As stolli mentioned, you can also simply use the labelelement as the wrapper:
正如 stolli 所提到的，您也可以简单地使用label元素作为包装器：
回答by DaniP
You can give to your div .boxalign2and labelfixed widths.
你可以给你的 div.boxalign2和label固定宽度。
View the demo http://jsfiddle.net/HC64Y/11/
查看演示http://jsfiddle.net/HC64Y/11/
.boxalign2 {
width:400px;
}
label {
text-align:right;
padding-right:20px;
display:inline-block;
min-width:150px;
}
回答by Aravin
<!DOCTYPE html>
<html>
<head>
<title>Centering a form</title>
</head>
<body>
<div class="form">
<label>Name</label>
<input type="text" name="name">
<label>Email</label>
<input type="text" name="email">
<label>Phone</label>
<input type="text" name="phone">
</div>
</body>
</html>
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/
演示在这里：https: //jsfiddle.net/durtpwvx/
回答by stolli
To ammend Jeff B's answer to get your result, simply give the elements a width in your css
要修改 Jeff B 的答案以获得您的结果，只需在您的 css 中给元素一个宽度
label {width: 100px}where '100' is whatever value looks best for your layout.
label {width: 100px}其中“100”是最适合您的布局的任何值。
Also, remember that the primary purpose of labels (as opposed to just div's or span's for labeling) is that labels act as a secondary click target for the control they are associated with. Therefore, you can wrap your elements in the label tag (<label><input /></label>) or associate them by id (<label for="foo"><input id="foo"/>) and give the user much more to click, simply by clicking the label, they can toggle the control, focus the text input, whatever. A big boon in usability for touch devices.
此外，请记住，标签的主要目的（与仅用于标记的 div 或 span 相对）是标签充当与其关联的控件的辅助点击目标。因此，您可以将元素包装在标签标签 ( <label><input /></label>) 中或通过 id ( <label for="foo"><input id="foo"/>) 将它们关联起来，并为用户提供更多点击，只需单击标签，他们就可以切换控件、聚焦文本输入等等。触摸设备可用性的一大福音。
