首页 >web前端 >css教程 >如何控制 CSS 中项目符号和列表项之间的间距?

如何控制 CSS 中项目符号和列表项之间的间距?

Linda Hamilton
Linda Hamilton原创
2024-12-11 15:39:16347浏览

How Can I Control the Spacing Between Bullets and List Items in CSS?

CSS:调节项目符号和列表项之间的距离

问题:

调整项目符号与其列表项之间的水平间距对应的

  • 有序或无序列表中的元素构成了挑战。为了说明这一点,请考虑以下内容:
    * Some list text goes
       here.

    期望结果:

    将空间修改为获取:

    *         Some list text goes
              here.

    *Some list text goes
     here.

    解决方案:

    将列表项的内容包含在具有相对定位的span元素内。可以操纵 span 的 left 属性来控制所需的间距。

    li span {
      position: relative;
      left: -10px;
    }
    <ul>
      <li><span>item 1</span></li>
      <li><span>item 2</span></li>
      <li><span>item 3</span></li>
    </ul>
  • 以上是如何控制 CSS 中项目符号和列表项之间的间距?的详细内容。更多信息请关注PHP中文网其他相关文章!

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