按以下方式对齐HTML输入字段： [英] Align HTML input fields by :
本文介绍了按以下方式对齐HTML输入字段：的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个HTML表单，如：
< html&
名称：< input type =text/>< / br>
电子邮件地址：< input type =text/>< / br>
输入值的说明：< input type =text/>< / br>
< / html>
现在标签都在同一列开始，但文本框从不同位置开始标签的文本长度。
有一种方法来对齐输入字段，所有的：和文本框都将在相同的位置开始，前面的文本将会正确对齐，直到：？
我可以使用CSS，如果这可以帮助实现这一点。
解决方案
HTML ：
< div&
< label>名称：< / label>< input type =text>
< label>电子邮件地址：< / label>< input type =text>
< label>输入值的说明：< / label>< input type =text>
< / div>
CSS：
标签{
display：inline-block;
float：left;
clear：left;
width：250px;
text-align：right;
}
输入{
display：inline-block;
float：left;
}
I have a HTML form like:
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>
Now the labels all begin in the same column but the text boxes are beginning in different positions as per the label's text length.
Is there a way to align the input fields such that, all the ":" and the text boxes, will begin in the same position, and the preceding text will be right aligned until the ":" ?
I am okay with using CSS if that can help achieving this.
解决方案
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
这篇关于按以下方式对齐HTML输入字段：的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
