CSS莫名其妙的缩进

Question

该文件中有一个缩进，导致元素“scroller”的左边距恰好为 30px； 。我找不到造成这种情况的原因。它让我陷入困境。

问题出在这个文件的某个地方： http://www.divethegap.com/update/z-css/admin /master.css

html

<div id="wrapper">
    <div id="scroller" align="left" style="left:0; text-align:left; margin:0; padding:0;">
        <ul id="thelist">
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
            <li>Pretty row 6</li>
        </ul>
    </div>
</div>

附加CSS

#wrapper {
    position:absolute;
    z-index:0;
    top:0px;
    bottom:0px;
    left:0;
    width:300px;
    background:#555;
    overflow:auto;
    text-align:left;
    float:left;
}

#scroller {
    position:relative;
    /*  -webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    float:left;
    width:300px;
    padding:0;
    overflow:auto;
    list-style:none;
    left:0;
    padding:0;
    margin:0;
}

#scroller ul {
    position:relative;
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
    overflow:auto;
}

#scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
    list-style:none;

}

谁能减轻我的痛苦并找到有问题的CSS？

Answer 1

在 text.css 中： http://www.divethegap.com/update /z-css/admin/text.css

您的所有列表项都应用了 margin-left：

li {
   margin-left: 30px;
}

当您不需要它时，您必须覆盖它，或者如果您在任何地方都不需要它，则将其删除。

http://jsfiddle.net/Gpu3b/

搜索/*固定 CSS 框。

Answer 2

测试一个简单的 CSS 重置：

* { margin: 0px; padding: 0px };

Answer 3

删除边距并添加所有内容。

* {
margin: 0;
padding: 0;
}

Answer 4

修复了 99% 的问题： http://developer.yahoo.com/yui/reset/ CSS

您可以使用 * { margin: 0;填充：0； } 作为快速修复，但应该在生产中使用 CSS 重置表。