通过以下方式对齐HTML输入字段：
通过以下方式对齐HTML输入字段：
提问于 2012-06-03 15:31:06
我有一个像这样的HTML表单：
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>现在，标签都在同一列中开始，但文本框根据标签的文本长度在不同的位置开始。
有没有办法对齐输入字段，使所有的":“和文本框都从相同的位置开始，并且前面的文本将右对齐，直到":”？
如果CSS可以帮助实现这一点，我可以使用CSS。
回答 4
Stack Overflow用户
发布于 2014-10-23 16:51:34
使用display table-cell/row可以在不需要任何宽度的情况下完成工作。
html：
<html>
<div>
<div class="row"><label>Name:</label><input type="text"></div>
<div class="row"><label>Email Address:</label><input type = "text"></div>
<div class="row"><label>Description of the input value:</label><input type="text"></div>
</div>
</html>Css：
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}Stack Overflow用户
发布于 2012-06-03 15:43:40
设置表单元素的宽度(在您的示例中应该存在！)并浮动(和清除)输入元素。另外，删除br元素。
Stack Overflow用户
发布于 2012-06-03 16:13:12
在我的例子中，我总是把这些东西放在一个p标签中，比如
<p> name : < input type=text /> </p>
等等，然后应用css，比如
p {
text-align:left;
}
p input {
float:right;
}您需要指定p tag.because的宽度，输入标记将一直浮动到正确的位置。
这个css也会影响提交按钮。您需要覆盖此标记的规则。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10868640
复制相关文章
相似问题