html - 不能将列表项放在容器的左侧

Question

我不知道为什么我的 li 项目卡在 div 容器的右侧。我只是想让 li 物品粘在容器的左侧。

html

<div id="side">
    <div class="sidemenu">
        <ul>
            <li>XC Camp</li>
            <li>Become a Sponsor</li>
            <li>Run Furman Community</li>
            </ul>
    </div>
</div>

css

#side {
    background-color:#333333;
    height:150px;
    float:left;
    width:20%;
    border:2px solid white;
}

.sidemenu li {
    display:block;
    border-left:4px solid #8068a0;
    padding:6px;
    margin:0px 0px 5px 0px;
    background-color:#8068a0;
}

Answer 1

它们尽可能靠左，因为每个<li>都包含在<ul>. 无序列表包含默认填充，因此您需要添加：

.sidemenu ul{
    margin:0;
    padding:0;
 }

到你的 CSS。

这是您在 JSfiddle 上的示例：http: //jsfiddle.net/5aFV8/

Answer 2

默认情况下，<ul>（无序列表）有padding，只需将它们设置为0.

ul {
  padding: 0;
}

这是您更新的代码：http: //jsfiddle.net/wVHSW/