[分享]css两个列表一样高

在网页设计中，列表元素是非常常见的元素类型，而有时候需要让两个不同的列表元素在垂直方向上保持一致高度。这时候，就需要使用CSS样式来实现这一需求。 要实现这个效果，我们可以使用flex布局或者grid...

在网页设计中，列表元素是非常常见的元素类型，而有时候需要让两个不同的列表元素在垂直方向上保持一致高度。这时候，就需要使用CSS样式来实现这一需求。
要实现这个效果，我们可以使用flex布局或者grid布局来控制列表元素的高度。下面是使用flex布局实现的代码示例：

.container {
  display: flex;
}
<br>
.list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
<br>
.list li {
  margin-bottom: 10px;
  background-color: #eee;
  padding: 10px;
} 

上面的代码中，我们使用了一个父容器.container来包裹两个列表元素，这里设置了display:flex属性来使用flex布局。
接下来，我们设置了.list元素为flex:1，这个属性会让列表元素均分.container的宽度，这样列表元素的宽度就相等了。我们还设置了list-style为none来取消列表默认的样式，同时还设置了margin和padding。
最后，我们设置了.list li元素的margin-bottom和padding属性。由于padding是在盒子内的，因此它会增加盒子的高度。而margin则是在盒子外的，因此不会导致盒子高度的变化。
通过这种方式，我们就可以轻松实现两个列表元素在垂直方向上保持一致高度了。当然，使用grid布局也可以实现这个效果，具体实现方式不同，仍然需要使用类似于上述的方法来控制元素的高度。