Html 如何定位与输入字段相关的标签标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16149585/
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 position label tags in relevance to the input fields
提问by Saint Dee
I am having a problem sorting this one out.
我在整理这个时遇到了问题。
here's my html
这是我的 html
<form>
<p><label for="comp-name">Name:</label>
<input type="text" name="comp-name"></input>
</p>
<p>
<label for="company-address">Address:</label>
<textarea name="company-address"></textarea>
</p>
<p>
<label for="postcode">Postcode:</label>
<input type="text" name="postcode"></input>
</p>
<p>
<label for="phone">Phone Number:</label>
<input type="text" name="phone"></input>
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email"></input>
</p>
</form>
here is what I want the form to look like:
这是我希望表格的样子：
having hard time figuring out how to place the label on the top-left part of the input/textarea.
很难弄清楚如何将标签放在输入/文本区域的左上角。
回答by cernunnos
If I understand correctly, a simple:
如果我理解正确，一个简单的：
label {
vertical-align: top;
}
should give you the results you want.
应该给你你想要的结果。
Fiddle: http://jsfiddle.net/N7e67/2/
回答by jbangerter
You can just put the labels in the left column of a table and the fields in the right, then position them within their cells
您可以将标签放在表格的左栏中，将字段放在右栏中，然后将它们放置在其单元格中
<table>
<tr>
<td>(label)</td>
<td>(input)</td>
</tr>
...
</table>
回答by Nishant Jain
you can use this code for positioning your object: style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px"
您可以使用此代码来定位您的对象： style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px"
change the left, top, height and width as per form design.
根据表单设计更改左侧、顶部、高度和宽度。
<label for="comp-name" style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px>Company Name:</label>
回答by clark
You can try using this boilerplate http://www.csskarma.com/lab/contactForm/or this tutorial http://designfestival.com/position-text-labels-on-forms-using%C2%A0css/
您可以尝试使用此样板http://www.csskarma.com/lab/contactForm/或本教程http://designfestival.com/position-text-labels-on-forms-using%C2%A0css/
- PS : for your information, the label
forattribute should reference anidof an input. - PPS : you might find this article interesting http://www.lukew.com/ff/entry.asp?1502
- PS：为了您的信息，标签
for属性应引用id输入的一个。 - PPS : 你可能会觉得这篇文章很有趣http://www.lukew.com/ff/entry.asp?1502
回答by rahul maindargi
Try to put your lable and input type inside the div tag
尝试将您的标签和输入类型放在 div 标签中
<p><div><label for="comp-name">Company Name:</label></div>
<div> <input type="text" name="comp-name"></input></div>
</p>
this should help you. if this si not what you expect please elaborate what you want to see.
这应该可以帮助你。如果这不是您所期望的，请详细说明您想看到的内容。
回答by Carl Brubaker
The easiest is to put the <input>inside the <label>
最简单的就是把<input>里面的<label>
<div>
<label for="comp-name">Company Name: <input type="text" name="comp-name" />
</label>
</div>
