Question

我正在努力理解为什么第一行列表项之后的每个“行”都没有遵循与第一行相同的保证金规则。

我希望所有的行都遵循与第二条规则相同的边距。我将所有内容都包装在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>

Answer 1

每个CREATE TABLE `ip` ( `ip_ip` varbinary(16) NOT NULL, `ip_last_request_time` timestamp(3) NULL DEFAULT NULL, `ip_city` varchar(45) COLLATE utf8mb4_unicode_ci DEFAULT '', `ip_countryCode` varchar(3) COLLATE utf8mb4_unicode_ci DEFAULT '', `ip_countryName` varchar(45) COLLATE utf8mb4_unicode_ci DEFAULT '', /* more 23 columns have been omitted for readability */ PRIMARY KEY (`ip_ip`), KEY `countryCode_index` (`ip_countryCode`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci中还有另外的</div>。删除它。

在第一行中，关闭父级LI，其他LI位于div之外，.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;
}

并非所有列表项都正确排列

1 个答案: