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，因此我们可以在提议的解决方案中的项目符号点周围清楚地看到其他多余的空间。

将左填充设置为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>

如果包装线的压痕没有丢失，那么该解决方案将是不错的选择。我仍然希望将换行与第一行的第一个字符的开头对齐，就像它们在常规列表中一样。

将左填充设置为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>

Answer 2

您必须添加到第二个示例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>

Answer 3

d <- data.frame(Cases = c("Student3", "Student1",
      "Student2", "Student4"), Class = rep("Math", 4), stringsAsFactors = F)

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

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

使用您自己的样式显示要点。.这是解决此问题的最佳方法...

请尝试使用此代码段。这可能适合您。谢谢。

Answer 4

有不同的方法。选中https://css-tricks.com/almanac/properties/l/list-style/，显示您可以订购列表“ list-style-position”属性。

否则，我们可以使用符号或任何图标或图像查看此链接“ Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image”，以完全破坏列表视图的对齐方式。

通常它将在li的属性之前添加，我们可以编写我们自己的。请告诉我是否需要

Answer 5

您也可以尝试使用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>

Answer 6

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

div ul{
  padding-left:0;
  list-style-position: outside;
}
div ul li{
  margin-left:20px;
}

尝试使用此CSS。

Answer 7

您可以尝试使用负边距。

if else

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

如何将UL的光盘（子弹）与包围的DIV的左边缘对齐？

常规列表

将左填充设置为0并不能完全解决

将左填充设置为1em并不能完全解决

问题

7 个答案: