對齊css菜單文本左besie菜單圖像

Question

我有一個簡單的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;
}

現在的問題是菜單文本浮在圖像上方，因此如何在圖像和文本之間留出空間

Answer 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 */
}

Answer 2

根據需要調整背景位置或填充文本。

Answer 3

一旦您可以更改圖片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;
}

Answer 4

增加左側的填充
http://tinkerbin.com/YdDw9q3E