gpt4 book ai didi

html - 对齐 css 菜单文本左 besie 菜单图像

转载 作者:太空宇宙 更新时间:2023-11-03 20:54:53 28 4
gpt4 key购买 nike

我有一个简单的 csss 菜单,其中包含左对齐的背景图像,我也希望文本也 float 在图像的左侧。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 */
}

关于html - 对齐 css 菜单文本左 besie 菜单图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11746273/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com