css ul li 两行排列

CSS中的ul li标签在网页设计中具有重要的作用，在实际运用中对于两行排列也是非常常见的。在掌握CSS中的ul li标签基础上，实现两行排列的效果其实非常简单。

首先，我们要了解一下CSS中ul li标签的作用。ul标签定义了无序列表，在其中包含多个li标签，每个li标签表示一个列表项。而我们要实现两行排列的效果，在代码中需要设置ul标签的宽度，并让每个li标签都占据一半宽度。

ul {
  list-style-type: none; /* 去掉列表项前面的符号 */
  width: 400px; /* 设置ul标签的宽度 */
  overflow: hidden; /* 让ul标签的溢出内容隐藏 */
}
li {
  float: left; /* 让li标签左浮动 */
  width: 50%; /* 让每个li标签占据一半的宽度 */
}

设置完上述代码后，我们就可以在页面上看到两列并排的列表项了。但是如果存在奇数个列表项，最后一项会变成单独一行。这时我们可以利用伪类选择器last-child来解决这个问题，将最后一个li标签的宽度设置为100%。

li:last-child {
  width: 100%; /* 让最后一个li标签占据整个宽度 */
}

这样，我们就可以实现两行排列的效果了。需要注意的是，这种排列方式需要计算时刻更改ul标签的宽度以适应不同的分辨率，否则在某些分辨率下会有显示不全的情况。