html - CSS - 由于 ul 基本填充，对象被压到一边

Question

我的问题是我的 ul 似乎有余量。我不明白为什么它不一直向左走。这也导致我的网站扩展。

/* Challenge list */
.container_list{
    width: 100%;
    float: left;
    background-color: red;

}
ul {
    width: 100%;
    float: left;
    list-style-type: none;

    
}

ul li{
    width: 100%;
    height: 150px;
    float: left;
    background: #FFF;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(44, 62, 80, 0.10);
    margin: 0 0 10px 0;
}

<!-- All challenges -->
    <h4 id="#">All challenges</h4>
    <div class="container_list">
    <ul class="challenge_list">
        <li>This is an item</li>
        <li>This is an item</li>
        <li>This is an item</li>
    </ul>
  </div>

Answer 1

如您所知，这是因为默认的浏览器设置。

这可以通过称为重置 css 的东西来避免，这会删除所有浏览器的所有默认浏览器设置。只需添加

即可轻松实现

<link href="css/reset.css" rel="stylesheet" />

在你的默认样式之上

看看几个reset css的，只需复制并粘贴即可。