我有一个像这样的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。
发布于 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;
}
发布于 2012-06-03 15:43:40
设置表单元素的宽度(在您的示例中应该存在!)并浮动(和清除)输入元素。另外,删除br元素。
发布于 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也会影响提交按钮。您需要覆盖此标记的规则。
https://stackoverflow.com/questions/10868640
复制相似问题