Question

我想添加一个放在每个li菜单项下面的图像，就像菜单分隔符一样。如何在CSS中执行此操作。我希望在向ul添加另一个li标签时动态渲染图像。

HTML code：

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

Answer 1

使li具有背景图像，该背景图像位于距离顶部足够远的位置，文本不会与其重叠。以下是您如何定位背景图片：

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

只需调整元素高度，即包含文本行的x像素加上背景图像的高度。

Answer 2

这样的事情应该有效。当然，您必须根据自己的需求和要求进行调整。

.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>

如何动态地将图像添加到<li>标签</li>

2 个答案: