如何使多列无序列表居中答案

【问题标题】：How to center multi column unordered list如何使多列无序列表居中
【发布时间】：2021-09-25 21:49:51
【问题描述】：

所以我有这 3 列无序列表代码：

<ul style="column-width: 300px; column-gap: 40px;">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
<li>hhh</li>
<li>iii</li>

我如何将它居中，以便它也保持响应？

谢谢！

【问题讨论】：

标签： css list styles

【解决方案1】：

要将列表分成 3 列，请使用 column-count: 3;

使用通用属性。但是要注意的是padding:0，因为ul 标签有默认padding，所以为了居中我们删除了填充。而list-style-position:inside;用于在容器内放子弹。

不要硬编码值，因为它会妨碍代码的响应能力。所以我在这里使用了%中的值

* {
  box-sizing: border-box
}

ul {
  width: 100%;
  column-width: 30%;
  column-gap: 3%;
  column-count: 3;
  padding: 0;
}

li {
  list-style-position:inside;
  border: 1px solid;
  text-align:center;
}

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
  <li>fff</li>
  <li>ggg</li>
  <li>hhh</li>
  <li>iii</li>
</ul>

您可以使用display:flex 使列表居中

ul {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  column-width: 300px;
  column-gap: 40px;
}

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
  <li>fff</li>
  <li>ggg</li>
  <li>hhh</li>
  <li>iii</li>
</ul>

您也可以使用padding-left: 50%根据项目符号居中

ul {
  display: block;
  background-color: grey;
  padding-left: 50%;
}

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
  <li>fff</li>
  <li>ggg</li>
  <li>hhh</li>
  <li>iii</li>
</ul>

【讨论】：

这不是必需的三列。
改了部分答案
@Paulie_D 你能告诉我们如何获取 id 名称，我们可以使用 classList 获取类名。有什么办法可以得到id名字

【解决方案2】：

根据已知的列宽和间距 (300*3 + 40 *2 = 980) 设置宽度，然后使用所需的方法居中。

也就是说，它不能响应式具有固定的像素列和间隙。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

ul {
  width: 380px; /* adjusted for demo */
  column-width: 100px; /* adjusted for demo */
  column-gap: 40px;
  display: inline-block;
  list-style: none;
}

body {
  text-align: center;
}

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
  <li>fff</li>
  <li>ggg</li>
  <li>hhh</li>
  <li>iii</li>
</ul>

【讨论】：