按以下方式对齐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屋!
查看全文