html - CSS 将文本框与标签对齐

Question

我的 fiddle 几乎可以说明问题所在。如果有人可以提供帮助，请尝试将标签放在每个文本框的左侧。 http://jsfiddle.net/HC64Y/

<div id="boxalign2" class="boxalign2" >                 
    <label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />  
    <label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>            
    <label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>

CSS

input.rounded2 {
    border: 1px solid #ccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 2px 2px 3px #666;
    -webkit-box-shadow: 2px 2px 3px #666;
    box-shadow: 2px 2px 3px #666;
    font-size: 20px;
    padding: 4px 7px;
    outline: 0;
    -webkit-appearance: none;

    float: left;
    display: inline-block;
    clear: left;
    width: 150px;
    text-align: right;
}

Answer 1

您正在输入 inline-block , 但您也将它们 float 到左侧。

如果删除 float: left并添加 <br>每次输入后，您都会得到正确的行为。

http://jsfiddle.net/A8es3/

要对齐框，请添加 div包装每个标签/输入，制作你的标签 inline-block具有固定的宽度。还有其他方法可以做到这一点，但这是一种方法。

http://jsfiddle.net/A8es3/1/

正如 stolli 提到的，您也可以简单地使用 label元素作为包装器:

http://jsfiddle.net/A8es3/2/