如何对齐两个文本框？

我有一个HTML代码如下如何对齐两个文本框？

<body> 
    Hello UserName:<input tyep="text"/><br/> 
    Pass:<input type="text"/> 
</body>

我希望两个文本字段应该以这样的方式，他们的左边框应该从两个lines.Because的相同位置，如果我开始运行，因为它是对齐这两个文本字段在标签结束后正好开始，我不希望它看起来很奇怪。我该怎么做？

来源

2012-01-30 Chandra Sekhar

看看this Chrome Developer Tools或Firebug的例子。

HTML：

<div class="main"> 
    <div class="field"> 
     <label for="n">Name</label> 
     <input type="text" name="n" /> 
    </div> 
    <div class="field"> 
     <label for="ln">Surnemt</label> 
     <input type="text" name="ln" /> 
    </div> 
    <div class="field"> 
     <label for="a">Bithplace</label> 
     <input type="text" name="a" /> 
    </div> 
</div>

CSS：

body {font-size:14px;} 
label {float:left; padding-right:10px;} 
.field {clear:both; text-align:right; line-height:25px;} 
.main {float:left;}

来源

2012-01-30 14:17:50 madhead

哇，这是非常聪明的。感谢分享！ – 2012-01-30 15:00:03

它帮助了我，谢谢... – 2012-01-31 10:12:39

如何对齐两个文本框？

回答

相关问题