如何将 UL 的圆盘（项目符号）与封闭的 DIV 的左边缘对齐？

Question

常规清单

这是一个常规列表，作为我的问题的基础。

div {
  background: lightgreen;
  width: 15em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
}

<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>

字体大小被放大，2em以便我们可以清楚地看到建议的解决方案中项目符号周围额外的不需要的空间。

将 left-padding 设置为 0 并不能完全解决

我想将列表的圆盘（项目符号）与元素的左边缘对齐div。所以我尝试这样的事情。

div {
  background: lightgreen;
  width: 15em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
}

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

<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>

如果换行的缩进没有丢失，这个解决方案会很好。我仍然希望换行与第一行的第一个字符的开头对齐，就像它们在常规列表中一样。

将 left-padding 设置为 1em 并不能完全解决问题

这是答案中提出的解决方案之一，但这并不奏效。我们可以看到 DIV 左边缘和要点圆盘之间有额外的水平空间。

div {
  background: lightgreen;
  width: 20em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
}

ul {
  padding-left: 1em;
}

<div>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus
      porttitor.</li>
    <li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
    <li>Nulla id</li>
    <li>Nam ut</li>
  </ul>
</div>

问题

解决这个问题的正确方法是什么？

Answer 1

您可以创建自己的子弹，并且可以轻松控制大小和距离：

div {
  background: lightgreen;
  margin-left:20px;
  font-size: 2em;
}
ul {
 list-style:none;
 padding:0;
}
li {
  display:flex;
}
li:before {
  content:"";
  width:0.4em;
  height:0.4em;
  border-radius:50%;
  background:#000;
  margin-right:0.5em;
  margin-top:0.4em;
  flex-shrink:0;
}
body {
 background:pink;
}

<div>
  <ul>
    <li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique</li>
    <li>Nulla id</li>
    <li>Nam ut</li>
  </ul>
</div>
<div style="font-size: 1em;">
  <ul>
    <li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique</li>
    <li>Nulla id</li>
    <li>Nam ut</li>
  </ul>
</div>