1

メニュー区切りのように、各liメニュー項目の下に画像を追加したいと思います。CSSでこれを行う方法。ul に別の li タグを追加すると、画像が動的にレンダリングされるようにします。

HTML コード:

<ul class="menu">
    <li>Bookmarks</li>
    <li>Something</li>
    <li>BUMPER STICKERS</li>
    <li>CARBONLESS FORMS</li>
    <li>CD JACKETS</li>
    <li>DIE CUT/CUSTOM STICKERS</li>
    <li>DOOR HANGERS</li>
    <li>ENVELOPES</li>
    <li>FOLDERS</li>
    <li>LETTERHEADS</li>
    <li>RECTANGULAR STICKERS</li>
    <li>ROUND STICKERS</li>
    <li>STATIC CLING</li>
    <li>TABLE TENTS</li>
    <li>VINYL BANNERS</li>
    <li>WINDOW STICKERS</li>
</ul>

CSS:

.seperator li {
    background-image: url(../Images/Template%20Images/Seperator.png);
    padding: 1px;
    width: 200px;
    height: 25px;
    position: absolute;
    right: 0px;
    bottom: 890px;
    background-repeat: no-repeat;
    display: run-in;
}
4

2 に答える 2

0

テキストが重ならないように、背景画像を上から十分に離して配置します。背景画像を配置する方法は次のとおりです。

http://www.w3schools.com/cssref/pr_background-position.asp

要素の高さを調整して、テキスト行の x ピクセルと背景画像の高さを含めるだけです。

于 2013-03-01T03:13:33.197 に答える
0

このようなものがうまくいくはずです。もちろん、ニーズや要件に合わせて微調整する必要があります。

.menu li{
    background: url(line.jpg) bottom left no-repeat;
    padding-bottom: 5px;
}

<ul class="menu">
    <li>Bookmarks</li>
    <li>Something</li>
    <li>BUMPER STICKERS</li>
    <li>CARBONLESS FORMS</li>
    <li>CD JACKETS</li>
    <li>DIE CUT/CUSTOM STICKERS</li>
    <li>DOOR HANGERS</li>
    <li>ENVELOPES</li>
    <li>FOLDERS</li>
    <li>LETTERHEADS</li>
    <li>RECTANGULAR STICKERS</li>
    <li>ROUND STICKERS</li>
    <li>STATIC CLING</li>
    <li>TABLE TENTS</li>
    <li>VINYL BANNERS</li>
    <li>WINDOW STICKERS</li>
</ul>
于 2013-03-01T04:16:07.393 に答える