关于#html5#的问题:用css编辑了 无序列表里面的内容 改变了字体大小 和字体样式 然后无序列表前面的空心圆不对齐了是为啥

用css编辑了 无序列表里面的内容 改变了字体大小 和字体样式 然后无序列表前面的空心圆不对齐了是为啥

img

该回答引用GPTᴼᴾᴱᴺᴬᴵ
可能是因为您使用了CSS属性,例如padding或margin,导致无序列表前面的空心圆位置发生了变化。

解决这个问题的方法是使用CSS的list-style-position属性来控制列表项标记的位置。您可以将其设置为inside或outside,以控制标记是否对齐。

例如,如果您希望空心圆与文本对齐,可以尝试将list-style-position设置为inside:

ul {
  list-style-position: inside;
}


如果您希望空心圆仍然在文本之前,并且对齐在同一水平线上,请尝试使用适当的padding和margin值来微调列表项和标记之间的距离。

ul {
  margin: 0;
  padding: 0;
}

li {
  margin-left: 20px;
  padding-left: 5px;
  text-indent: -20px;
}

li:before {
  content: "•";
  margin-right: 5px;
}


请注意,此代码块只是示例,您需要根据自己的具体情况进行微调。

是由于使用了不同字体大小或样式导致的列表标记与列表项不对齐。以尝试在CSS中为无序列表项(li)和无序列表标记(ul)指定相同的字体大小和样式来解决这个问题