我可以移除子弹而不只是隐藏它们吗？

Question

当我使用代码 list-style: none;要删除子弹，看起来它只是隐藏它们，因为对齐偏离中心，就好像子弹只是看不见但仍然存在。如何使我的列表居中对齐？

此图显示了未隐藏的子弹。

在此图像中，当我隐藏项目符号时，列表偏离中心，就好像项目符号不可见但仍然影响对齐。

Answer 1

您所要做的就是删除列表上的 padding-left 。

#list-2 {
  list-style: none;
}
#list-3 {
  list-style: none;
  padding-left: 0;
}

<ul id="list-1"> 
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>
<ul id="list-2"> 
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>
<ul id="list-3"> 
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>

Answer 2

尝试将此代码与您的列表项类一起使用，它可能会工作并且会与中心对齐

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
list-style: none;