html - 需要将跨度与输入类型 ="text"垂直对齐

Question

<分区>

Answer 1

不完全确定你是如何在服务器端生成标记的，但是做表单的更好方法是使用 label - input 对无序列表。制作 label 的内联 block ，给它们一个宽度，然后使用 vertical-align 使它们居中对齐。

HTML:

<ul>
    <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li>
    <li><label for="person1">Person 1: </label><input id="person1" name="person1" type="text" /></li>
    <li><label for="hobby">Hobby: </label>
        <select name="Hobby" id="hobby">
            <option value="0">not selected</option>
            <option value="1">swimming</option>
            <option value="2">gaming</option>

        </select>
    </li>
</ul>

CSS:

li label {
    display: inline-block;
    width: 80px;
    vertical-align: baseline;
    text-align: right;
    margin-right: 20px;
}

li input, li select {
    padding: 3px 4px 4px;
    width: 300px;
    border: 1px solid #ccc;
    font-size: 13px;
}

参见:http://jsfiddle.net/pCCsg/完整的例子。如果您不能更改标记，这应该仍然适用于您当前的 HTML。只需将 label 和 input, select 选择器替换为您正在使用的类即可。