为 UL 使用高分辨率项目符号点图像

Question

我需要为 ul 使用 100 像素宽的项目符号图像，然后将其缩小到 8px 并使其表现得像普通的 ul 项目符号列表。

ul.bg-img li {
    background-image: url(http://placehold.it/100x100);
    background-size: 8px 8px;
 ...
}

问题是项目符号没有与第一行内容对齐。如果我在 li 中放置一个标题标签和一个段落，则项目符号显示在 li 元素的中间或下方。

如果我添加边距和填充来移动它，它不适用于可变行高和内容量。

/* breaks when going to second line */
margin: 1.00em 0 0 -30px;
padding: 0 0 0 20px;

它应该像默认项目符号一样：与顶部内容对齐。

http://jsfiddle.net/TheFiddler/nqvfj004/

注意：我需要使用 100 像素的高分辨率项目符号，因为这是用于导出 Web 预览以进行打印的 Web 应用程序。

Answer 1

请使用 list-style-image:url(http://placehold.it/100x100); 而不是背景图片，然后查看结果。你根本不需要使用背景。

Answer 2

您应该将它放在 li 中的第一个元素而不是整个 li 中。试试这个选择器：

ul.bg-img li *:first-child

demo

Answer 3

从顶部设置 `background-position`，在大字体元素上移动位置

首先，将 background-position 设置为从顶部开始的某个值，而不是中心。我更喜欢使用 calc(1em - 4px)，因为这会将 8px 高图像置于标准 1em 字体行的垂直中间。您可以使用 top 或其他基本单位作为旧浏览器的后备。

ul.bg-img li {
    ...
    background-position: left top;
    background-position: left calc(0.5em - 4px);
    ...
}

接下来，针对font-size大于1em的元素进行调整。您至少可以通过两种方式做到这一点：

通过向上移动它们的位置并应用相应的负下边距来调整可能出现在第一行的较大字体大小的元素。
```
ul.bg-img li h1:first-child {
    position: relative;
    top: -0.25em;
    margin-bottom: -0.25em;
}
```

h1, h2, h3 {
  margin: 0;
  padding: 0;
  line-height: 1;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.75em;
}
h3 {
  font-size: 1.5em; 
}
ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li {
    background-image: url(http://placehold.it/100x100);
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: left top;
    background-position: left calc(0.5em - 4px);
    margin: 1em 0 0 -30px;
    padding: 0 0 0 20px;
}
ul.bg-img li h1:first-child {
    position: relative;
    top: -0.25em;
    margin-bottom: -0.25em;
}
ul.bg-img li h2:first-child {
    position: relative;
    top: -0.1875em;
    margin-bottom: -0.1875em;
}
ul.bg-img li h3:first-child {
    position: relative;
    top: -0.125em;
    margin-bottom: -0.125em;
}

<h3>Background Image on li</h3>

<ul class="bg-img">
    <li>
        <h1>Bullet lines up with H1</h1>
    </li>
    <li>
        <h2>Bullet lines up with H2</h2>
        <p>Paragraph on second line</p>
    </li>
    <li>
        <h3>Bullet lines up with H3</h3>
        <span>Span on second line</span>
    </li>
    <li>
        <p>Paragraph on first line</p>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <span>Span on first line</span>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <p>Paragraph alone</p>
    </li>
    <li>
        <span>Span alone</span>
    </li>
</ul>

对列表项的所有直接子项应用固定的行高。这里使用 rem 而不是 em.
```
ul.bg-img li>* {
    line-height: 1.25rem;
}
```

h1, h2, h3 {
  margin: 0;
  padding: 0;
  line-height: 1;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.75em;
}
h3 {
  font-size: 1.5em; 
}
ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li {
    background-image: url(http://placehold.it/100x100);
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: left top;
    background-position: left calc(0.5rem - 4px);
    margin: 1em 0 0 -30px;
    padding: 0 0 0 20px;
}
ul.bg-img li>* {
    line-height: 1.25rem;
}

<h3>Background Image on li</h3>

<ul class="bg-img">
    <li>
        <h1>Bullet lines up with H1</h1>
    </li>
    <li>
        <h2>Bullet lines up with H2</h2>
        <p>Paragraph on second line</p>
    </li>
    <li>
        <h3>Bullet lines up with H3</h3>
        <span>Span on second line</span>
    </li>
    <li>
        <p>Paragraph on first line</p>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <span>Span on first line</span>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <p>Paragraph alone</p>
    </li>
    <li>
        <span>Span alone</span>
    </li>
</ul>

Answer 4

尝试为所有 Li 元素或仅第一个 Li 元素设置从顶部开始的背景位置。

第一个李：

ul.bg-img li:first-child {
background-image: url(http://placehold.it/100x100);
background-size: 8px 8px;
background-position: left 10px;  /* 10px is dummy value you can set as per your requirement. */
.....
}

所有李：

ul.bg-img li {
background-image: url(http://placehold.it/100x100);
background-size: 8px 8px;
background-position: left 10px;  /* 10px is dummy value you can set as per your requirement. */
.....
}

为 UL 使用高分辨率项目符号点图像

Use High Resolution Bullet Point Image for UL

html

css

bulletedlist

从顶部设置 `background-position`，在大字体元素上移动位置

为 UL 使用高分辨率项目符号点图像

Use High Resolution Bullet Point Image for UL

html

css

bulletedlist

从顶部设置 background-position，在大字体元素上移动位置

从顶部设置 `background-position`，在大字体元素上移动位置