如何将UL的圆盘(项目符号)与封装DIV的左边缘对齐

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

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>

您必须将margin-left: 0.84em;和list-style-position: outside;添加到第二个示例中，这样您就可以获得所需的内容：

div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
ul {
padding-left: 0;
margin-left: 0.84em;
list-style-position: outside;
}

<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>

div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
div ul {
list-style:none;
}
div ul li {

}
div ul li .disc {
display: inline-block;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background-color: #000;
margin-right: 10px;
}

<div>
<ul>
<li><span class="disc"></span>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><span class="disc"></span>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><span class="disc"></span>Nulla id</li>
<li><span class="disc"></span>Nam ut</li>
</ul>
</div>

https://jsfiddle.net/Sampath_Madhuranga/4wv7kuep/5/

使用您自己的样式来显示要点。。这是解决这个问题的最佳方案。。。

试试这个片段。。这可能对你有用。谢谢

有不同的方法。检查https://css-tricks.com/almanac/properties/l/list-style/它显示您可以对列表"列表样式位置"属性进行排序。

否则，我们可以使用符号或任何图标或图像查看此链接"为<ul>中的<li>元素自定义项目符号，它是一个常规字符，而不是图像"，它提供了列表视图对齐的完全中断。

一般它会把前面的属性添加到li中，我们可以自己写。如果需要，请告诉我

您也可以尝试使用background-images，使用最小css，它的工作方式与前面其他人所说的pseudo :before and :after完全相同。这也可以让你严格控制子弹的大小。请看下面的片段：(

div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding-left: 1em;
background: url("https://via.placeholder.com/10.png/000/000") no-repeat left .5em / .25em;
}

<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>
<br>
<br>
<div style="font-size: 1em">
<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>