2

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 アプリ用であるためです。

4

4 に答える 4

1

li全体ではなく、内の最初の要素に配置する必要がありliます。このセレクターを試してください:

ul.bg-img li *:first-child

デモ

于 2015-03-05T14:56:59.793 に答える
0

すべての Li 要素または最初の 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 に答える
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);
    ...
}

次に、font-size が 1em より大きい要素を調整する必要があります。少なくとも 2 つの方法でこれを行うことができます。

  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 に答える