对齐 CSS 菜单文本左侧 besie 菜单图像答案

【问题标题】：align css menu text left besie menu image对齐 CSS 菜单文本左侧 besie 菜单图像
【发布时间】：2012-07-31 18:02:28
【问题描述】：

我有一个简单的 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;
}

现在的问题是，菜单文字浮在图片上方，那么如何在图片和文字之间留出空间

【问题讨论】：

如果您可以发布图片的绝对网址，那么很容易提出更好的解决方案。

标签： html css menu css-float menubar

【解决方案1】：

如果我理解正确，您可以在 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 */
}

【讨论】：

【解决方案2】：

根据需要调整背景位置或填充文本。

【讨论】：

【解决方案3】：

一旦您可以更改图像position，您就可以将background-position 用于您的background-image，否则，

将Padding-left 用于您的班级menu-news 或将填充应用于.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;
}

【讨论】：

【解决方案4】：

增加左边的内边距
http://tinkerbin.com/YdDw9q3E

【讨论】：