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

将someMap :: (a -> [a]) -> [a] -> [a]添加到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;
}

border-box：宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括边距。 W3Schools

Answer 2

更改：

* { box-sizing: content-box; }

要

* { box-sizing: border-box; }

删除ul缩进 - 找不到解决方案？

2 个答案: