1

css が初めてなので、この最初の問題を見つけました。これはいくつかの基本的なことであると確信しており、誰かが少なくとも私がどの方向に進むべきかのヒントを教えてくれれば非常に感謝しています. 間違った方向に進んでいるだけかもしれないと思います。

問題：

このナビゲーションには、いくつかのセパレーターとロールオーバーがあります。問題は、区切り記号とliのホバーの間にある左マージンを追加できないように見えることです。セパレーターは常にホバーに固定されます。右マージンを追加するとうまくいきますが、左マージンを追加しようとすると、右マージンのサイズが 2 倍になります。

ここに写真があります：http://bit.ly/OQTMda

#nav {
    position: absolute;
    top: 200px;
    width: 946px;
    height: 46px;
    padding: 7px;
    background: url('images/nav_bg.gif') top left repeat-x;
    }

#nav li {
    list-style: none;
    float: left;
    line-height: 46px;
    margin-right: 7px;
    }

#nav li:hover {
    background: url('images/nav_hover.gif') top left repeat-x;
    }

#nav li + li {
    background: url('images/separator.gif') top left no-repeat;
    }

#nav a {
    margin-left: 35px;
    margin-right: 35px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    }

アドバイスをいただければ幸いです。前もって感謝します！

4

2 に答える 2

1

liマージン - パディング - 行の高さで要素をスタイリングすることは避けてください。aむしろ、より良い結果を得るために内部要素のスタイルを設定してください。

liデザインを保持するために、並べられた失礼なボックスなどの要素について常に考えてください。

于 2012-08-22T10:59:54.273 に答える
0

これを試して

#nav li:hover {
    background: url('images/nav_hover.gif') 2% 0 repeat-x;
    }

#nav li + li {
    background: url('images/separator.gif') 2% 0 no-repeat;
    }
于 2012-08-22T12:33:47.657 に答える