2

我有一个类似这样的 CSS 菜单......

<ul>
    <li><img src="...">Menu item</li>
    <li><img src="...">Menu item2</li>
</ul>

我的 CSS 目前给了我这个......

在此处输入图像描述

我想要的是这样的东西......

在此处输入图像描述

我已经尝试将 CSS 缩减到相关位 - 如果我遗漏了任何重要的内容，请告诉我......

ul#menu li ul li {
    position: relative;
    display: block;
    background-color: #fff;
    border-top: solid 1px #808080;
}

ul#menu li ul li:first-child {
    border-top: none;
}

ul#menu li ul li img {
    position: relative;
    left: 0px;
}

问题是图像是 的子图像，<li>它不是 的全宽<ul>，所以position: relative; left: 0px;与li不是有关ul。

如何相对于图像定位图像ul？

4

3 回答 3

3

由于这些图像实际上并不是内容的一部分，因此请img从 html 中删除元素并在 CSS 中添加一行：

ul#menu li ul li {
  background: url(/Content/images/nav/Left.png) 5px center no-repeat;
}

这会将箭头设置为始终距左边缘 5px 并自动居中的背景图像，即使菜单项跨越两行，就像其中几个一样。

于 2013-08-18T18:27:39.917 回答
1

一种简单的解决方案

ul#menu li ul li img {
    float: left;
    margin-top: 7px;
}
于 2013-08-18T18:03:41.873 回答
1

将 ul#menu li ul li宽度设置为100%

ul#menu li ul li {
    width: 100%; //Make sure you have a set px width somewhere else in the menu hierarchy
    position: relative;
    display: block;
    background-color: #fff;
    border-top: solid 1px #808080;
}

然后将img设置为absolute

ul#menu li ul li img {
    position: absolute;
    left: 0px;
}
于 2013-08-18T18:04:18.990 回答