0

シンプルな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;
}

ここでの問題は、メニューテキストが画像の上に浮かんでいるため、画像とテキストの間にスペースを作る方法です。

4

4 に答える 4

2

私があなたを正しく理解していれば、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 */
}
于 2012-07-31T18:08:53.190 に答える
1

必要に応じて背景の位置を調整するか、テキストをパディングします。

于 2012-07-31T18:10:27.000 に答える
1

あなたは一度あなたのイメージを変えることができbackground-positionます。background-imageposition

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;
}
于 2012-07-31T18:11:49.490 に答える
1

左側のパディングを増やします
http://tinkerbin.com/YdDw9q3E

于 2012-07-31T18:12:06.893 に答える