如何使用CSS在列表中缩进?

恩西尔瓦

我有以下代码:

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content li:before {
  content: "• ";
  color: green;
  margin-right: 10px;
  line-height: 34px;
  list-style-position: inside;
}
<div class="page-content">

  <ul>
    <li>short bullet</li>
    <li>short bullet</li>
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
  </ul>

</div>

JsFiddle

如您所见,如果列表项继续进行到第二行,它将丢失li padding/ margin

有什么方法可以让后续的行与第一行匹配?

迪帕斯

您可以添加margin-left:-20pxli:before

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}

.page-content li:before {
  content: "• ";
  color: green;
  margin-right: 10px;
  margin-left:-20px;
  line-height: 34px;
  list-style-position:inside;
}
<div class="page-content">

  <ul>
    <li>short bullet</li>
    <li>short bullet</li>
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
  </ul>

</div>

另一个解决方案可能是text-indent:-1emli

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content li {
  text-indent: -1em
}
.page-content li:before {
  content: "• ";
  color: green;
  margin-right: 10px;
  line-height: 34px;
  list-style-position: inside;
}
<div class="page-content">

  <ul>
    <li>short bullet</li>
    <li>short bullet</li>
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
  </ul>

</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS:如何删除Firefox中显示的列表项的缩进

来自分类Dev

如何使用HTML或CSS缩进

来自分类Dev

如何使用HTML或CSS缩进

来自分类Dev

如何缩进无序列表中的换行?

来自分类Dev

如何使用CSS缩进html输出

来自分类Dev

如何使用CSS缩进数据表?

来自分类Dev

如何使用 CSS 获得第二(第三等)行缩进以匹配列表中的第一行与自定义编号?

来自分类Dev

如何使用jquery将数据呈现为html中的缩进列表?

来自分类Dev

您如何使用GitHub风格的markdown在README文件中缩进项目符号列表?

来自分类Dev

如何使用jquery将数据呈现为html中的缩进列表?

来自分类Dev

缩进HTML中的列表

来自分类Dev

缩进HTML中的列表

来自分类Dev

CSS无法从项目符号列表中删除缩进

来自分类Dev

如何在Office 2016的项目符号列表中悬挂缩进

来自分类Dev

使用递归从数组中创建一个缩进列表

来自分类Dev

SwiftUI-在编辑模式下而不使用onDelete时如何避免列表中的行缩进?(附带代码/视频)

来自分类Dev

减少多级列表中的缩进

来自分类Dev

CSS中的“ fluid”悬挂缩进

来自分类Dev

使CSS中的超链接缩进

来自分类Dev

如何使用printf在Bash中缩进字符串?

来自分类Dev

使用Twig生成Markdown,如何缩进Twig中的块?

来自分类Dev

如何使用printf在Bash中缩进字符串?

来自分类Dev

在HTML列表中应用图标和文本时,我遇到缩进问题。如何正确缩进项目?

来自分类Dev

如何在CSS中使用自定义图标自定义复选框的标签上添加缩进缩进?

来自分类Dev

如何缩进nano中的多行

来自分类Dev

如何在 ConstraintLayout 中缩进?

来自分类Dev

CSS模式中的换行和缩进将缩进杀死环

来自分类Dev

如何使用XStream缩进XML?

来自分类Dev

如何使用VBA缩进HTML?

Related 相关文章

  1. 1

    CSS:如何删除Firefox中显示的列表项的缩进

  2. 2

    如何使用HTML或CSS缩进

  3. 3

    如何使用HTML或CSS缩进

  4. 4

    如何缩进无序列表中的换行?

  5. 5

    如何使用CSS缩进html输出

  6. 6

    如何使用CSS缩进数据表?

  7. 7

    如何使用 CSS 获得第二(第三等)行缩进以匹配列表中的第一行与自定义编号?

  8. 8

    如何使用jquery将数据呈现为html中的缩进列表?

  9. 9

    您如何使用GitHub风格的markdown在README文件中缩进项目符号列表?

  10. 10

    如何使用jquery将数据呈现为html中的缩进列表?

  11. 11

    缩进HTML中的列表

  12. 12

    缩进HTML中的列表

  13. 13

    CSS无法从项目符号列表中删除缩进

  14. 14

    如何在Office 2016的项目符号列表中悬挂缩进

  15. 15

    使用递归从数组中创建一个缩进列表

  16. 16

    SwiftUI-在编辑模式下而不使用onDelete时如何避免列表中的行缩进?(附带代码/视频)

  17. 17

    减少多级列表中的缩进

  18. 18

    CSS中的“ fluid”悬挂缩进

  19. 19

    使CSS中的超链接缩进

  20. 20

    如何使用printf在Bash中缩进字符串?

  21. 21

    使用Twig生成Markdown,如何缩进Twig中的块?

  22. 22

    如何使用printf在Bash中缩进字符串?

  23. 23

    在HTML列表中应用图标和文本时,我遇到缩进问题。如何正确缩进项目?

  24. 24

    如何在CSS中使用自定义图标自定义复选框的标签上添加缩进缩进?

  25. 25

    如何缩进nano中的多行

  26. 26

    如何在 ConstraintLayout 中缩进?

  27. 27

    CSS模式中的换行和缩进将缩进杀死环

  28. 28

    如何使用XStream缩进XML?

  29. 29

    如何使用VBA缩进HTML?

热门标签

归档