我很难理解为什么我的第一行列表项之后的每一“行”都没有遵循与第一“行”相同的边距规则。
我希望这里的所有行都遵循与第二条规则相同的边距。我已将所有内容包装在一个 div 中，这样我就可以将我的 div 元素居中，从而使我的包装列表在我的网页上居中。
提前致谢!
:root {
background-color: skyblue;
}
.list {
padding: 0px;
margin-left: 8%;
}
.box {
width: 15%;
overflow: hidden;
list-style: none;
background-color: blue;
float: left;
overflow: hidden;
height: 20%;
margin: 1%;
border-radius: 4.5%;
display: flex;
justify-content: center;
vertical-align: middle;
align-items: center;
}<html>
<link rel="stylesheet"
type="text/css"
href="/Users/skyler/Documents/GitHub/Code/the_color_wheeling_boxes.css"/>
<div class="back">
<ul class="list">
<!-- box 1--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 2--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 3--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 4--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 5--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 6--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 7--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 8--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 9--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 10--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 11--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 12--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 13--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 14--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 15--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 16--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 17--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 18--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 19--> <li class="box"> <input type="checkbox" class="check"></div></li>
<!-- box 20--> <li class="box"> <input type="checkbox" class="check"></div></li>
</ul>
</div>
</html>最佳答案
你还有额外的</div>在每个LI .将其删除。
在第一行中关闭父级 div ，其他LI在外面.back , 外面 .back ul .
你的代码被解释为
<div>
<ul class="list">
<li class="row">...</li>
</ul>
</div>
<li class="row">...</li>
<li class="row">...</li>
<li class="row">...</li>
要质疑的工作代码。
:root {
background-color: skyblue;
}
.list {
padding: 0px;
margin-left: 8%;
}
.box {
width: 15%;
overflow: hidden;
list-style: none;
background-color: blue;
float: left;
overflow: hidden;
height: 20%;
margin: 1%;
border-radius: 4.5%;
display: flex;
justify-content: center;
vertical-align: middle;
align-items: center;
}<html>
<link rel="stylesheet"
type="text/css"
href="/Users/skyler/Documents/GitHub/Code/the_color_wheeling_boxes.css"/>
<div class="back">
<ul class="list">
<!-- box 1--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 2--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 3--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 4--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 5--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 6--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 7--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 8--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 9--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 10--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 11--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 12--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 13--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 14--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 15--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 16--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 17--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 18--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 19--> <li class="box"> <input type="checkbox" class="check"></li>
<!-- box 20--> <li class="box"> <input type="checkbox" class="check"></li>
</ul>
</div>
</html>关于html - 并非所有列表项都正确排列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56503067/