1

我正在使用像 Kendo 这样的第三方库，它们在渲染时会输出各种类型的 HTML 元素。

所以你最终可能会遇到这样的场景：

<ul>
    <li>
        <label>label text</label>
        <div>muli select widget</div>
        <span>date selector</span>
    </li>
</ul>

注意！假设我无法控制从这些小部件/第三方工具呈现的 HTML。

问题是上述场景的垂直对齐。我创建了一个 JSFiddle，它显示了标签如何垂直对齐不正确。看这里：

http://jsfiddle.net/tMJFF/

我怎样才能让这三个元素完全垂直对齐？

4

6 回答 6

2

在所有元素上使用 inline-block 属性

label,
.div-input,
.span-input{
display: inline-block;
vertical-align: middle;
}

http://jsfiddle.net/6vQ4Q/

于 2013-09-23T10:12:26.973 回答
1

你提到了剑道，所以我建议使用他们装饰的任何选择器ul并执行以下操作：

ul.kendo-selector-class-of-choice li * {
    vertical-align: middle;
    display : inline; /* for lte IE7 only */
}

由于您无法控制正在创建的元素，因此这可能会随着装饰客户端库（在本例中为 Kendo）的不同实现/版本更新而改变。尽管可以说是一个饥饿的选择器，但它的*范围受到限制.kendo-selector-class

以下适用于 Chrome 和 IE10，但 jsfiddle 对 IE8 的浏览器测试有点棘手，因为它本身不能正确呈现......但如果你做进一步测试，你会发现你必须使用类似的东西display:inline如果你'重新回到可爱的 IE7 土地-。

http://jsfiddle.net/tMJFF/11/

于 2013-09-23T11:32:39.073 回答
0

将 li 中的所有元素垂直对齐到中间。

ul li *{
    vertical-align:middle;
}
于 2013-09-23T10:21:13.153 回答
0

只需添加vertical-align:middle;

这里引用了小提琴

label {
    vertical-align:middle;
    line-height:20px;
    border:1px solid blue;
}
.div-input {
    vertical-align:middle;
    border:1px solid black;
    margin-right:20px;
    display:inline-block;
    height:20px;
    width:100px;
    box-model:collapse-box
}
.span-input {
    vertical-align:middle;
    border:1px solid black;
    display:inline-block;
    height:20px;
    width:100px;
}
于 2013-09-23T10:14:00.123 回答
0 
label {
    line-height:20px;
    border:1px solid blue;
    vertical-align:top;
}
于 2013-09-23T10:14:05.297 回答
0

vertical-aligncss 属性垂直对齐标签，因此只需使用：

label,div,span{
    vertical-align :middle
}

演示

于 2013-09-23T10:58:21.907 回答