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

使 li 有一个背景图像，该图像的位置距离顶部足够远，文本不会与它重叠。这是定位背景图像的方法：

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 回答