如何获得<ul>的要点与文本居中？

Question

当我尝试<ul>将文本居中在<li>中心但子弹点位于页面的最左侧时.当文本居中时,有没有办法让子弹点与文本保持一致？

#abc{text-align: center; }

<div id="section1">
<div id="abc">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div/>
<div/>

Answer 1

添加list-style-position: inside 到ul元素.(例)

为默认值list-style-position属性为outside.

ul {
    text-align: center;
    list-style-position: inside;
}

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

另一种选择(产生稍微不同的结果)将使整个ul元素居中:

.parent {
  text-align: center;
}
.parent > ul {
  display: inline-block;
}

<div class="parent">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

Answer 2

你可以list-style-position: inside;在ul元素上做到这一点:

ul {
    list-style-position: inside;
}

看工作小提琴

Answer 3

长话短说

ul {
  padding-left: 0;
  list-style-position: inside;
}

说明： 第一个属性padding-left: 0清除元素的默认填充/间距ul，同时list-style-position: inside使点/项目符号li像普通文本一样对齐。

所以这段代码

<p>The ul element</p>
<ul>
asdfas
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

没有任何 CSS 会给我们这个：

但是如果我们在顶部添加CSS，就会得到这样的结果：