Question

我有一个HTML代码如下

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

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

Answer 1

使用Chrome开发者工具或Firebug查看this示例。

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;}

如何对齐两个文本字段？

1 个答案: