2

我需要为 ul 使用 100 px 宽的项目符号图像，然后将其缩小到 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 应用程序。

4

4 回答 4

1

你应该把它放在里面的第一个元素上，li而不是整个li. 试试这个选择器：

ul.bg-img li *:first-child

演示

于 2015-03-05T14:56:59.793 回答
0

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

于 2015-02-23T19:46:37.287 回答
0

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);
    ...
}

接下来，您应该调整字体大小大于 1em 的元素。您至少可以通过两种方式做到这一点：

  1. 通过向上移动它们的位置并应用相应的负下边距来调整可能出现在第一行的较大字体大小的元素。

    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>

  1. 将固定的行高应用于列表项的所有直接子项。在这里使用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>

于 2015-03-05T15:31:08.580 回答
0

尝试为所有 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. */
.....
}
于 2015-03-10T12:30:12.260 回答