首页 >web前端 >css教程 >为什么我的列表项的第二行在项目符号下方而不是在项目符号旁边缩进?

为什么我的列表项的第二行在项目符号下方而不是在项目符号旁边缩进?

Susan Sarandon
Susan Sarandon原创
2024-11-22 01:23:131022浏览

Why are My List Items' Second Lines Indenting Under the Bullet Instead of Beside It?

列表项中的第二行在项目符号后缩进

在此问题中,用户在应用 CSS 后在对齐列表中的文本时遇到困难重置。具体来说,每个列表项中的第二行文本从项目符号下方开始,而不是在项目符号旁边缩进。

问题是由于 li 标签的 list-style-position 属性而产生的。默认情况下,此属性设置为“内部”,这会导致文本环绕项目符号。为了正确对齐文本,我们需要将 list-style-position 设置为“outside”。

但是,这会产生一个新问题:项目符号现在位于列表容器之外。为了解决这个问题,我们可以对列表应用左边距缩进,使项目符号与列表外部的文本对齐。

这是 CSS 解决方案:

ul {
  list-style-position: outside;
  margin-left: 1em;
}

此代码设置列表样式位置设置为“外部”,以将文本与项目符号对齐,并对列表应用缩进以将其与页面上的其他文本对齐。

以上是为什么我的列表项的第二行在项目符号下方而不是在项目符号旁边缩进?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn