我有一个简单的 csss 菜单,其中包含与左侧对齐的背景图像,并且我希望文本也漂浮在图像的左侧。html:
<div class='mmenu'><ul><li><a id="li6" class="menu-news" href= "viewNews.php" >News</a></li></ul></div>
CSS:
.mmenu{
height: fit-content;
width: fit-content;
float: left;
position: fixed;
}
.mmenu ul
{
margin-top: 20px;
margin-left: 15px;
}
.mmenu li
{
margin-bottom: 0px;
width: 150px;
color: white;
}
.mmenu a {
font-size:14px;
font-family: Arial, sans-serif;
font-style: normal;
font-weight:bold;
display: block;
padding-top:12px;
padding-bottom: 7px;
text-align:left;
padding-right: 12px;
padding-left: 15px;
position: relative;
}
.menu-news{
background-image:url('menu icons/css-sprite.png');
background-repeat: no-repeat; background-position:5px 17px;
}
现在的问题是菜单文本漂浮在图像上方,那么如何在图像和文本之间留出空间