Question

这是实时链接：http://mrgsp.md:8080/awesome/foobar 点击创建，然后在保存后获取验证消息（跨度），垂直对齐 文字输入

如何垂直对齐它们与文本输入相同？

Answer 1

不完全确定如何在服务器端生成标记，但更好的方法是在无序列表中使用label - input对。制作label个内联块，给它们一个宽度，然后使用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选择器替换为您正在使用的类。

Answer 2

如果所有项目都是这样对齐的，请为它们分配一个类并使用：

position: relative;
bottom: 5px; /* for example */

需要垂直对齐带有输入类型=“文本”的跨度

2 个答案: