刪除ul indent - 解決方案發現無法正常工作？

Question

我已經閱讀了許多有關同一問題的問題......但它不會爲我工作。我只是在嘗試使用響應式CSS，而且我用ul創建了一個菜單，但縮進不斷與我的網格佈局混淆。我在幾個問題中找到的解決方案是添加list-style-type：none;填充：0;和list-style-position：inside;但我仍然得到填充。這是我的代碼：

     <div class="row"> 
<div id="header" class="col-12"> 

<h1>Hey</h1> 

</div> 
         </div> 
         <div class="row"> 
<div id="menu" class="col-3"> 
    <ul> 
     <li>MENÚ 1</li><li>MENÚ 2</li><li>MENÚ 3</li> 
    </ul> 
</div> 
<div id="content" class="col-6"> 
    <h2>Sup?</h2> 
    <p> Content goes here </p> 
</div> 
<div id="sidebar" class="col-3"> 
    <p>This is a sidebar!</p> 
</div> 
         </div> 

和相關的CSS：

* 
{ 
    box-sizing: content-box; 
} 

[class*="col-"] { 
    width: 100%; 
    float:left; 
    padding:15px; 
} 

@media only screen and (min-width:768px) 
{ 
    .col-1{width:8.33%;} 
    .col-2{width: 16.66%;} 
    .col-3{width:25%;} 
    .col-4{width:33.33%;} 
    .col-5{width:41.66%;} 
    .col-6{width: 50%;} 
    .col-7{width: 58.33%;} 
    .col-8{width: 66.66%;} 
    .col-9{width: 75%;} 
    .col-10{width: 83.33%;} 
    .col-11{width: 91.66%;} 
    .col-12{width: 100%;} 
} 

@media only screen and (max-width:767px) 
{ 
    li a 
    { 
     display: block; 
    } 
} 

.row::after 
{ 
    content: ""; 
    clear:both; 
    display:table; 
} 
#menu ul 
{ 
    list-style-type: none; 
    list-style-position: inside; 
    margin: 0; 
    padding:0; 
} 
#menu li 
{ 
    margin-bottom:10px; 
    background-color: burlywood; 
} 

然而，我不斷收到UL填充與網格數弄亂，使我的#sidebar下面出現： CSS trouble

任何人都可以告訴我我做錯了什麼？謝謝。

編輯：添加網格CSS

Answer 1

添加box-sizing: border-box;到[class*="col-"]。您的問題是由寬度的填充錯誤計算引起的。此屬性將解決這個問題，如下所示：

* { 
 
    box-sizing: content-box; 
 
} 
 

 
[class*="col-"] { 
 
    width: 100%; 
 
    float: left; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
} 
 

 
@media only screen and (min-width:768px) { 
 
    .col-1 { 
 
     width: 8.33%; 
 
    } 
 
    .col-2 { 
 
     width: 16.66%; 
 
    } 
 
    .col-3 { 
 
     width: 25%; 
 
    } 
 
    .col-4 { 
 
     width: 33.33%; 
 
    } 
 
    .col-5 { 
 
     width: 41.66%; 
 
    } 
 
    .col-6 { 
 
     width: 50%; 
 
    } 
 
    .col-7 { 
 
     width: 58.33%; 
 
    } 
 
    .col-8 { 
 
     width: 66.66%; 
 
    } 
 
    .col-9 { 
 
     width: 75%; 
 
    } 
 
    .col-10 { 
 
     width: 83.33%; 
 
    } 
 
    .col-11 { 
 
     width: 91.66%; 
 
    } 
 
    .col-12 { 
 
     width: 100%; 
 
    } 
 
} 
 

 
@media only screen and (max-width:767px) { 
 
    li a { 
 
     display: block; 
 
    } 
 
} 
 

 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 

 
#menu ul { 
 
    list-style-type: none; 
 
    list-style-position: inside; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#menu li { 
 
    margin-bottom: 10px; 
 
    background-color: burlywood; 
 
}

<div class="row"> 
 
    <div id="header" class="col-12"> 
 

 
     <h1>Hey</h1> 
 

 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div id="menu" class="col-3"> 
 
     <ul> 
 
      <li>MENÚ 1</li> 
 
      <li>MENÚ 2</li> 
 
      <li>MENÚ 3</li> 
 
     </ul> 
 
    </div> 
 
    <div id="content" class="col-6"> 
 
     <h2>Sup?</h2> 
 
     <p> Content goes here </p> 
 
    </div> 
 
    <div id="sidebar" class="col-3"> 
 
     <p>This is a sidebar!</p> 
 
    </div> 
 
</div>

邊界框：的寬度和高度屬性（和最小/最大特性）包括內容，填充和邊界，但不是保證金。 W3Schools

Answer 2

變化：

* { 
    box-sizing: content-box; 
} 

要：

* { 
    box-sizing: border-box; 
}