[英]align css menu text left besie menu image
我有一个简单的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;
}
现在的问题是菜单文本浮在图像上方,因此如何在图像和文本之间留出空间
如果我对您的理解正确,则可以在menu-news
类中添加填充,以推送文本,使其不位于背景图像的顶部。
.menu-news{
background-image:url('menu icons/css-sprite.png');
background-repeat: no-repeat;
background-position:5px 17px;
padding-left: 50px; /* Or whatever padding is appropriate */
}
根据需要调整背景位置或填充文本。
一旦您可以更改图片position
就会使用background-position
background-image
作为background-image
,否则,
在课程menu-news
使用Padding-left
填充按钮或对.mmenu a{ }
应用填充.mmenu a{ }
例:
.mmenu a {
font-size:14px;
font-family: Arial, sans-serif;
font-style: normal;
font-weight:bold;
display: block;
padding-top:12px;
padding-bottom: 7px;
padding-left: xx px /* added now */
text-align:left;
padding-right: 12px;
padding-left: 15px;
position: relative;
}
增加左侧的填充
http://tinkerbin.com/YdDw9q3E
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.