Question

我有一个表单元素列表。标签位于每个元素旁边。一些标签，一些有文字。它们在不同的浏览器中表现不同。

基本上发生的事情是，带有文本的标签在列表项上方创建了空格。表单比这复杂得多，但我已将其归结为这个基本代码：http://jsfiddle.net/uZ2Et/

#cleanVersion li {
    display: inline-block;
    border: 1px solid gray;
    height: 200px;
    margin: 0;
    padding: 0;
}
#cleanVersion label {
    display: inline-block;
    font-size: 70px;
    background-color: blue;
    border: 0;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 150px;
}


<div id="cleanVersion">
    <ul>
        <li><label>test</label></li>
        <li><label></label></li>
    </ul>
</div>

我已经尝试调整边距，边框，填充，线高......但标签仍然不一致。

如何摆脱列表项目上方出现文字的空白？

编辑：这是一个更接近我实际做的更复杂的例子：http://jsfiddle.net/uZ2Et/6/

Answer 1

在列表项上使用vertical-align: top;：http://jsfiddle.net/uZ2Et/1/

HTML Label标记在包含内容时会在元素上方添加空格

1 个答案: