CSS:项目和<li>之间的控制空间?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (21)

我想控制bullet在<ol><ul>中推动<li>右移的水平空间

*  Some list text goes
   here.

变为

*         Some list text goes
          here.

*Some list text goes
 here.

提问于
用户回答回答于

把它的内容放在span相对定位,则可以通过span的left属性控制。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 4373046</title>
        <style>
            li span { position: relative; left: -10px; }
        </style>
    </head>
    <body>
        <ul>
            <li><span>item 1</span></li>
            <li><span>item 2</span></li>
            <li><span>item 3</span></li>
        </ul>
    </body>
</html>
用户回答回答于

如果你希望更好地控制符号和文本之间的空格,你可以考虑:

1. 使用背景图像:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

优势:

  • 你可以用你想要的任何图像。
  • 你可以使用css的background-position使用像素、EMS或%将图像定位到与文本相关的任何位置。

缺点:

  • 向页面添加一个额外的(尽管较小)图像文件,从而增加页重。
  • 如果用户增加了浏览器上的文本大小,则该项目将保持原来的大小。随着文本大小的增加,它也可能会进一步偏离位置。
  • 如果你正在开发一个响应性布局,只使用宽度百分比,则很难在屏幕宽度范围内精确地获得bullet。

2. 在<li>标签

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

优势:

  • 无图像=下载文件减少1个。
  • 通过调整<li>,你可以添加同样多的额外在项目和文本之间的水平空格,随你喜欢。
  • 如果用户增加文本大小,则间距和项目大小应按比例缩放。

缺点:

  • 不能将项目符号移动到比默认浏览器更接近文本的位置。
  • 仅限于css内建项目类型的形状和大小。
  • 符号必须与文本颜色相同。
  • 无法控制bullet的垂直定位。

(3)将文本加起来<span>元素

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

优势:

  • 无图像=下载文件减少1个。
  • 你比选项2更能控制bullet的位置:你可以把它移到更接近文本的地方(尽管我尽了最大的努力,但你似乎不能通过添加改变垂直位置。padding-top<span>。不过,其他人可能有办法解决这个问题)。
  • 这个符号可以是与文本不同的颜色。
  • 如果用户增加了他们的文本大小,那么这个项目应该按比例进行调整(如果你在EMS中设置了填充和页边距,而不是PX)。

缺点:

  • 需要额外的非语义元素(这可能会比现实生活中失去更多的朋友),但是那些希望代码尽可能精简和高效的人会很烦人,这违反了HTML/CSS应该提供的表示和内容的分离)。
  • 无法控制bullet的大小和形状。

扫码关注云+社区