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

您的所有列表项都有一个保证金：

li {
   margin-left: 30px;
}

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

http://jsfiddle.net/Gpu3b/

在css框中搜索/* Fixed。

Answer 2

解决了99％的问题：http://developer.yahoo.com/yui/reset/CSS

您可以使用* { margin: 0; padding: 0; }作为快速修复，但应使用CSS重置表进行制作。

Answer 3

测试简单的CSS重置：

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

Answer 4

删除边距并填充所有内容。

* {
margin: 0;
padding: 0;
}

CSS莫名其妙的缩进

4 个答案: