css设置li在ul中横向平均分布

CSS中可以使用Flexbox布局或者Grid布局来让`<li>`元素在`<ul>`列表中横向均匀分布。以下是两种方法的示例：

1. **使用 Flexbox**:

ul {
  display: flex; /* 开启Flexbox模式 */
  list-style-type: none;
  justify-content: space-between; /* 子项间等距分布 */
}

li {
  flex: 1; /* 自适应宽度，保持等宽 */
}

在这里，`justify-content: space-between`会让每个`li`元素之间均匀分布，而`flex: 1`会让它们等分可用空间。

2. **使用 Grid** (适用于更复杂的网格布局):

ul {
  display: grid;
  list-style-type: none;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 创建等宽列，直到列充满 */
  gap: 10px; /* 列间距 */
}

li {
  background-color: #eee; /* 可视化li元素 */
}

这会创建等宽的列，并自动调整列的数量以填满容器。`gap`属性设置了列之间的间距。

相关问题

css ul li 横向排列

要让 CSS 中的 ul li 横向排列，你可以使用以下代码：

HTML 代码：

<ul>
  <li>菜单1</li>
  <li>菜单2</li>
  <li>菜单3</li>
  <li>菜单4</li>
</ul>

CSS 代码：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 设置为 flex 布局 */
}

li {
  padding: 10px;
  background-color: #f2f2f2;
  margin-right: 10px;
}

以上代码中，我们通过设置 `display: flex;` 将 ul 元素设置为 flex 布局，然后通过设置 li 元素的 margin 和 padding 等样式，来控制菜单项的间距和样式。

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`中有边框或者内边距等，需要计算进去宽度百分比中。