我在使用 WebKit 浏览器中的无序列表时遇到了问题。这段代码被注入(inject)到一个不属于我的页面中,所以我不能真正使用 CSS 重置,但我不知道是什么导致了我的问题。
<div class='instruct'>
<ul>For best results please make sure:
<li>Your entire face including your eyebrows and chin are visible in the frame</li>
<li>Your face is well lit but please avoid excessive backlighting</li>
</ul>
</div>
CSS:
.instruct {
display: inline;
font-size:14px;
text-align:center;
padding-top: 10px;
padding:0px;
margin: 0px;
}
.instruct ul {
position: relative;
left: 30px;
width: 320px;
font-weight: bold;
padding: 0px;
margin: 0px;
list-style: none;
}
.instruct ul li {
font-weight: normal;
text-align: left;
text-indent: 0px;
padding: 0px;
padding-top: 10px;
margin: 0px;
}
我目前在 IE/FF 中得到的结果是所有列表项都正确对齐在 UL 内容框的最左侧。然而,在 Chrome 和 Safari 中,在 UL 内容框的左侧和每个 LI 内容框之间有大约 20px 的空间。
在 Chrome 的开发人员控制台中检查该元素时,突出显示效果的框显然距离 UL 左侧的左侧约 20 像素。好像有 20 像素的填充或边距来自某处。
鉴于 UL 和 LI 的填充和边距均为零,我无法弄清楚这一点。
如有任何想法,我们将不胜感激。
编辑: 你可以在这里看到它的截图:
最佳答案
抱歉...necro-thread..但它喜欢在该主题的 Google 搜索中排名靠前。
您的内联 block (或内联 block )会在列表项上默认生成 4px 的额外空间。转到 UL 标签并添加 font-size: 0
问题已解决。
关于css - WebKit 浏览器 - 无序列表 - 额外空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7774558/