html - CSS li 列表，左边距

Question

我不明白为什么我的左边有边距:

CSS:

html, body {
    font-family:Myriad Pro, sans-serif;
    font-size:18px;
    color:#000;
    margin:0px;
    padding:0px;
    background: url('./images/background.png');
}

#container {
    width:890px;
    height:530px;
    margin:36px auto;
}

#userList {
    width:228px;
    height:355px;
    float:right;
    border:1px solid #cccccc;
}

.users li {
    list-style-type:none;
    background-color: #f2f2f2;
    width:100%;
    height:50px;
    border-bottom: 1px solid #cccccc;
}

HTML:

<div id="userList"><ul class="users"><li><img src="./pic/none.png">Piet van Meerdijk</li><li><img src="./pic/none.png">Henk v/d Wal</li></ul></div>

当我放置 margin-left:-40px;在 CSS 代码中，li 项现在位于左侧，但右侧有一个边距。为什么？

JSfiddle:http://jsfiddle.net/8Cwcy/

Answer 1

<ul>标签有一个自动 padding的 40px所以您需要将其更改为 0px:

ul {
    padding: 0px;
}

这应该适用于所有浏览器。

fiddle :http://jsfiddle.net/8Cwcy/3/