Question

我想删除li元素左侧的额外空格，但不知道该怎么做。虽然ul的边距和填充为0，但左边还有一些额外的空间。请帮忙！这是图像：

HTML：

<div class="menu">
    <div class="container">
            <!-- menu icon -->
            <div class="icon-close">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </div>

        <!-- menu -->
        <ul>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">HELP</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>

    </div>
</div>

CSS：

.menu {
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;

}

.menu li {
    border-bottom: 1px solid #636366;
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
    width: 270px;
}

Answer 1

将margin: 0;添加到.menu li - 应该修复它（或至少margin-left: 0）

Answer 2

考虑在CSS中明确设置padding-left：0，如下所示：

.menu li {
    border-bottom: 1px solid #636366;
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 0; // <-- make sure to set this
    padding-top: 3px;
    width: 270px;     
}

Answer 3

尝试使用

设置容器的样式

.container{
    padding:0;
}

Answer 4

修改：

我认为唯一理解你问题的是nonstop328。我的答案是使文本与列表元素上的border-bottom对齐，这是我认为你想要的。我会把它留在这里，以防它将来帮助你调试这样的问题，但考虑将其他答案标记为已接受。

由于其他答案和您的意见建议从padding-left删除margin-left和.menu li（或明确将其设置为0）不起作用，我们只有2其他可能性。

您padding-left上设置了margin-left和/或.menu li a。在这种情况下，要么删除它，要么明确地将其设置为0。
您在边距处设置了!important标记或在其他位置填充并将其评论出来，甚至使用浏览器的开发者控制台可能会让您想您已删除它，但实际上你还没有。

要知道这是不是这样，你可以在Chrome中做到这一点（FF可能差不多）：
- 右键单击页面中的元素，然后单击“Inspect element”。
- 单击DOM框架中的正确元素。
- 在另一个框架中，确保选中styles。点击filter一词，然后输入margin或padding，它会过滤掉所有将这些属性添加到元素的CSS规则。
- 取消选中非左边距，边距，填充左边或填充的所有规则。
- 对这两个CSS规则以及<li>和<a>元素进行清洗，冲洗和重复。

您还可以直观地了解正在发生的事情。在DOM框架中，将鼠标悬停在<a>标记和<li>标记上。您会注意到该元素的背景会改变颜色。蓝色表示元素内容的实际尺寸，绿色表示填充，橙色表示边距。像这样：

在此示例中，我添加了margin-left 25和padding-left 20。

删除ul元素左侧的额外空格

4 个答案: