简体   繁体   中英

CSS inexplicable indent

There is an indent in this file that is causing the element 'scroller' to have a left margin of exactly 30px; . I cannot find what is causing this. It is driving me up the wall.

The problem is somewhere is this file: http://www.divethegap.com/update/z-css/admin/master.css

The 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>

Additional 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;

}

Can anyone alleviate me of my suffering and find the offending CSS?

In text.css here : http://www.divethegap.com/update/z-css/admin/text.css

You have a margin-left applied to all of your list item:

li {
   margin-left: 30px;
}

You must override it when you don't want it or remove it if you don't need it anywhere.

http://jsfiddle.net/Gpu3b/

Search for the /* Fixed in the css box.

The fix to 99% of these problems: http://developer.yahoo.com/yui/reset/CSS

You can use * { margin: 0; padding: 0; } * { margin: 0; padding: 0; } * { margin: 0; padding: 0; } as a quick fix, but a CSS reset sheet should be used for production.

测试一个简单的CSS Reset:

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

Remove margins and apdding off everything.

* {
margin: 0;
padding: 0;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM