删除UL缩进 - 发现解决方案不起作用

Question

我已经阅读了许多有关同一问题的问题...但是它对我不起作用。我只是四处尝试响应迅速的CSS，我用UL进行了菜单，但是凹痕不断地弄乱了我的网格布局。我在几个问题中发现的解决方案是添加列表式式型：无；填充：0;和列表式位置：内部；但是我仍然得到填充。这是我的代码：

                        <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麻烦

有人可以告诉我我做错了什么吗？谢谢。

编辑：添加网格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;
}

to：

* {
    box-sizing: border-box;
}