HTML标签标签在包含内容时在元素上方添加空格
问题描述:
我有一个表单元素列表。标签贴在每个元素旁边。有些标签,有些标签有文字。他们在不同的浏览器中表现不同。HTML标签标签在包含内容时在元素上方添加空格
基本上发生的事情是,具有文本的标签正在列表项上方创建空白。形式是比这要复杂得多,但我已经熬下来到这个基本代码: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/
在我的简化版的作品。在我试图做的工作中,它没有。试一试这个http://jsfiddle.net/uZ2Et/6/ – user1337
把它放在列表项目的子项然后:'.refine-search-container li> * {vertical-align:top; }'http://jsfiddle.net/uZ2Et/9/ – tuff
好吧,所以我必须为每个元素添加'vertical-align:top;' - 标签,选择,输入 - 然后它们全部对齐。以前,我把所有东西都垂直对齐,这是我的目光,但后来我遇到了这个问题,它在浏览器中并不一致。至少现在他们都处于顶端,并且在所有浏览器中都应该保持一致。感谢您帮助我考虑进一步调查。 – user1337