css 设置ul里的li 8个一行

你可以通过设置`ul`的宽度和`li`的宽度百分比来实现每行显示8个`li`的效果。

具体的CSS代码如下：

ul {
  width: 100%; /* 设置ul的宽度为100% */
  list-style: none; /* 去掉li的前面的点 */
  margin: 0;
  padding: 0;
}

li {
  width: 12.5%; /* 设置每个li的宽度为12.5%（100% / 8） */
  float: left; /* 设置li浮动，使其横向排列 */
  box-sizing: border-box; /* 设置盒模型为border-box，防止宽度超出 */
  padding: 10px;
  text-align: center;
}

这样就可以实现每行显示8个`li`的效果。需要注意的是，如果`li`中有边框或者内边距等，需要计算进去宽度百分比中。

相关问题

css 设置ul里的li 两个一行

你可以使用CSS的flexbox布局来实现这个效果。

首先，给`ul`设置`display: flex;`，然后给`li`设置`flex-basis: 50%;`，这样每行就只能容纳两个`li`。

具体的CSS代码如下：

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  flex-basis: 50%;
}

css ul li 实现纵排

可以使用 CSS 的 display 属性和 float 属性来实现纵向排列。

首先，将 ul 元素的 display 属性设置为 block，将 li 元素的 display 属性设置为 block 或 inline-block，然后将 li 元素左浮动或右浮动即可。

示例代码如下：

ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: block;
  /* 或者 display: inline-block; */
  float: left; /* 或者 float: right; */
  margin: 0;
  padding: 0;
}

这样设置后，ul 元素会变成块级元素，占据一行的宽度，而 li 元素会排列在 ul 元素的左侧或右侧，从上到下纵向排列。