我在WebKit浏览器中遇到了无序列表的问题。这段代码被注入到我不拥有的页面中,因此我无法真正使用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的填充和边距均为零,我无法理解这一点。
任何想法都会受到赞赏。
编辑: 你可以在这里看到它的截图:
答案 0 :(得分:5)
对不起... necro-thread ..但它喜欢在谷歌上搜索主题。
您的内联块(或内联)在列表项上默认生成额外的4px空间。转到UL标签并添加字体大小:0
问题解决了。
答案 1 :(得分:1)
除了<ul>
标记之外,<li>
标记内不应包含任何内容。
这适用于您直接在<ul>
标记内的文字 - 这可能是造成问题的原因。
答案 2 :(得分:0)
尝试{-webkit-margin-before:0; -webkit-margin-after:0; -webkit-margin-start:0; -webkit-margin-end:0; -webkit-填充开始:0} 如果不起作用,请查看http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/html.css
答案 3 :(得分:0)
这似乎是Chrome for Android的一个问题。
修复方法是不为margin:0px;
设置ul
,而是设置margin-left:0px;
和margin-top:0px;
。