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

Question

我读过很多关于同一问题的问题...但它对我不起作用。我只是在尝试响应式 CSS，我制作了一个带有 ul 的菜单，但缩进一直在扰乱我的网格布局。我在几个问题中找到的解决方案是添加 list-style-type:none;填充：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 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>

border-box: The width and height properties (and min/max properties) includes content, padding and border, but not the margin. W3Schools

Answer 2

变化：

* {
    box-sizing: content-box;
}

收件人：

* {
    box-sizing: border-box;
}

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

Remove ul indent - solutions found not working?

css

indentation

html-lists

responsive-design