刪除ul元素左側的多余空白

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 。 我的答案是使文本與list元素的border-bottom對齊，這就是我認為您想要的。 如果將來可以幫助您調試此類問題，我將在此處保留，但請考慮將其他答案標記為已接受。

---

由於其他答案和您的評論都建議從.menu li刪除padding-left和margin-left （或將其顯式設置為0 ）不起作用，因此我們只有兩種其他可能性。

1. 您在.menu li a上設置了padding-left和/或margin-left 。 在這種情況下，請將其刪除或將其顯式設置為0 。
2. 您在邊距上設置了!important標志，或者在其他位置進行了填充，然后將其注釋掉，甚至使用瀏覽器的開發人員控制台，都可能使您認為已將其刪除，但實際上您沒有刪除它。
   
   要查明是否存在這種情況，請按照以下步驟在Chrome中進行操作（FF可能幾乎相同）：
   • 右鍵單擊頁面中的元素，然后單擊“檢查元素”。
   • 單擊DOM框架中的正確元素。
   • 在另一幀中，確保選擇了styles 。 單擊單詞filter然后在其中鍵入margin或padding ，它將過濾掉所有將這些屬性添加到元素的CSS規則。
   • 取消選中所有具有非零的margin-left，margin，padding-left或padding的規則。
   • 對這兩個CSS規則以及<li>和<a>元素都進行清洗，沖洗和重復。

您還可以直觀了解正在發生的事情。 在DOM框架中，將鼠標懸停在<a>標記和<li>標記上。 您會注意到該元素的背景改變了顏色。 藍色表示元素內容的實際尺寸，綠色表示填充，橙色表示邊距。 像這樣：

在這個例子中我加了margin-left 25和padding-left 20。