我想在导航栏中的列表项旁边使用图像，就像下图一样标签。但仍然无法正常工作。请帮忙。 CSS
/* Sub-menu */
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 35;
z-index: 99999;
background-color: #444;
background-image: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul img{position: relative; float: right; width:100px; height:100px;left:100px; bottom: 50px; box-shadow: 0 1px 0 #111111,
0 2px 0 #777777; background-color: #444;
background-image: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
display: block; }
HTML
<body><ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
<img src="footer.png" >
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
最佳答案
您可以对图像使用 position:absolute ，对于 ul 使用 pagging-right 以及图像的宽度和 min-height 与图像的高度，以确保 ul 将始终包含图像。 https://jsfiddle.net/IA7medd/7kvc5avh/
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 35;
z-index: 99999;
background-color: #444;
background-image: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
padding-right:120px;
min-height:120px;
}
#menu ul img{
position: absolute;
width:100px;
height:100px;
right:10px;
top: 10px;
box-shadow: 0 1px 0 #111111,
0 2px 0 #777777;
background-color: #444;
background-image: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
display: block;
}
关于html - 在导航栏中沿着侧面图像列出元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37364211/