[英]css menu image background left
I have a menu ul li that I want to put in each li one different image: 我有一个菜单ul li,我想在每个li中放入一个不同的图像:
<ul id="menu">
<li class="home">
<a href="$urlsite/home">home</a>
</li>
<li class="sells">
<a href="$urlsite/sells">Sells</a>
</li>
<li class="message">
<a href="$urlsite/message">Message</a>
</li>
</ul>
css CSS
#menu {
position:relative;
width: 100%;
padding: 0;
margin-top:0px;
box-sizing: border-box;
font-weight:bold;
}
#menu li {
list-style: none;
text-align:left;
padding-left:20px;
height:40px;
line-height:40px;
vertical-align: middle;
border-bottom:0px;
}
#menu li a {
margin:0;
text-decoration:none;
width:100%;
height:100%;
display: inline-block;
}
.home{
background-image: url('http://infinitilinens.herokuapp.com/assets/icons/home_blue.png');
background-size:20px;
background-repeat: no-repeat;
padding-left: 30px;
display: block;
}
My problem is, the HOME ICON (and all others) are not in front of the text link. 我的问题是,HOME图标(和所有其他图标)不在文本链接的前面。 How can I align the image with the link?
如何使图像与链接对齐? http://jsfiddle.net/954baet0/
http://jsfiddle.net/954baet0/
If you want to use a background image as a logo (be aware that it will not be clickable) you could use the background-position property . 如果要将背景图像用作徽标(请注意,它将不可单击),则可以使用background-position属性 。
Best regards 最好的祝福
您只需将以下代码行添加到.home中:
background-position: 0px 11px;
You can use background-position 您可以使用背景位置
The first value is the horizontal position and the second value is the vertical
第一个值是水平位置,第二个值是垂直位置
#menu li {
list-style: none;
text-align:left;
padding-left:20px;
height:40px;
line-height:40px;
vertical-align: middle;
border-bottom:0px;
background-position: 2px center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.