2 
.menu li {
    list-style:none;
    float:left;
    padding-right:20px;
    padding-top:25px;
}

.menu li a, .menu li a:visited {
    color:#ffffff;
    font-size:12px;
    text-decoration:none;
    background:url(images/menu_hover_right.png) top right no-repeat;
    padding-right:10px;
}

.menu span {
    background:url(images/menu_hover.png) top left no-repeat;
    padding-left:10px;
    padding-top:2px;
}

誰もがそれらを並べる方法を知っています、両方の画像は丸い側面で透明です。

バグ画像。

4

1 に答える 1

0

問題は、実際に画像を逆方向に保存していることです。左の画像は短い画像で、右の画像は長い画像である必要があります。これを変更すると、CSSは適切な場所に配置されます。

.menu { list-style: none; }
.menu li {
    float: left;
    font-size: 12px;
    margin: 25px 10px 0; }
.menu li a {
    background: none 0 0 no-repeat;
    text-decoration: none;
    padding: 0 0 0 10px;
    display: inline-block; }
.menu li a:hover { 
    background-image: url(images/menu_hover.png);
    color: #ffffff; }
.menu li a span {
    background: none 100% 0 no-repeat;
    float: left;
    padding: 2px 10px 0 0;
    display: block; }
.menu li a:hover span { background-image: url(images/menu_hover_right.png); }

また、通常は、との両方の内側に高さを設定することをお勧めし.menu li aます.menu li a span。ブラウザの不整合により、パディングは固定の高さを設定するための非常に信頼性の低い方法です。

于 2011-12-13T18:27:57.580 に答える