1

メニュー項目の背後に背景画像や色を使用しようとしています。画像または背景色のみを使用すると、背景はテキストの高さにのみ一致します。通常のボタンのように、背景の高さは 30px、テキストは 16px で中央揃えにする必要があります。考えられるすべての CSS の組み合わせを試しましたが、探している結果が得られません。 

    #menu-container {
    /*float: left;*/
width: 960px;
margin:50px auto 0 auto;
height:50px;
    }

    #menu ul {
text-align: left;
height:50px;
    }


    #menu ul li {
display: inline;
background-image: url(images/menubutton.png);
background-repeat: no-repeat;
    }

     #menu ul li a {
text-transform: uppercase;
padding-right: 13px;
padding-left: 13px;
font-size: 16px;
    /*line-height: 0.2em;*/
color: #000;
font-style: normal;
letter-spacing: 1px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
     Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 400;
    }

    #menu ul li a:hover {
color: #ff0000;
text-decoration: none
    }
4

1 に答える 1

0

必要なコードは次のとおりです。

#menu ul li {
    display: inline-block;
    background-color: #a0a0a0; /* I changed this for testing */
    background-repeat: no-repeat;
    padding-top: 7px;
    padding-bottom: 7px;
}

基本的にdisplay: inline、高さを調整することができませんでした。display: blockまた、すべてが同じ行にあるとは限らないため、使用できません。だから、display: inline-blockまさにあなたが必要とするものです。
次にpadding-top、 and padding-bottomwith 7pxeach を追加して、テキストを中央に配置しました。

ここに動作するデモがあります

これが役に立ったことを願っています。

于 2013-02-05T21:10:18.880 に答える