位置相对于父亲的父亲

我有一个CSS菜单是这样的......位置相对于父亲的父亲

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

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

enter image description here

我想要什么是这样的...

enter image description here

我试着修剪下来的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？

来源

2013-08-18 Basic

由于这些图片不是实际的一部分内容，删除t他img从HTML元素和一个行添加到您的CSS：

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

这将设置箭头，始终是为5px从左侧边缘和自动居中，即使菜单项跨两行的背景图像，就像他们中的一些人一样。

来源

2013-08-18 18:27:39 stuajc

谢谢，你是对的...这不是内容，不属于HTML – Basic

一个简单的解决

ul#menu li ul li img { 
    float: left; 
    margin-top: 7px; 
}

来源

2013-08-18 18:03:41 VenomVendor

设置你的 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-18 18:04:18 iRector

位置相对于父亲的父亲

回答

相关问题