-4

このコードを使用してレスポンシブ リンクを作成しています (つまり、閲覧者がリンク先のページにいるときに強調表示されます)。

http://www.hicksdesign.co.uk/else/cssnav/

これには、ID を使用して単純な HTML ナビゲーション バーをコーディングする必要があります。

しかし、なぜか作成したナビゲーション バーには、リンクが縦のリストとして構造化されています。明らかな何かが欠けているのでしょうか、それともこれはブラウザ側の不具合ですか? 上記のページから取得したコードはリストが水平になっているため、このようにフォーマットする理由を理解するのに苦労しています. 奇妙なことに、ホバーしてもリンクの色が変わらないので、li a:hover スタイルも機能していないと思います。

これを使用しているページ ( https://dl.dropboxusercontent.com/u/33061840/site/responsivedesigntest.html ) と、リンクをスタイリングする CSS の一部です。

#navcontainer ul {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;

}

#navcontainer ul li {
    display: inline;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
}

#navcontainer ul li a {
    border-right: none;
    padding: 0;
    margin: 0 0 10px 0;
    color: #f5d7b4;
    text-decoration: none;
    display: block;
    text-align: center;
    font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover {
    color: #930;
    background: #f5d7b4;
}
4

1 に答える 1

3

あなたのセレクターは間違っています！

#navcontainer ul存在しません。代わりに、要素に idnavlistがありますul。

これはトリックを行います：

<b>NAVIGATE:</b>が内部からどのように移動されたかulを見て、以下の CSS の変更を見てください。

<div class="section group">
    <div class="col span_1_of_2">
                <b>NAVIGATE:</b>
                            <ul id="navlist"> 
                                <li><a href="home.html" id="home"</a>Home</li>
                                <li><a href="zukan.html" id="zukan">Zukan</a></li>
                                <li><a href="Stamps" id="stamps">Stamps</a></li>
                                <li><a href="Photography" id="photography">Photos</a></li>
                            </ul>
            </div>
</div>

--

#navlist {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#navlist li {
    display: inline;
    float: left;
    text-align: center;
    padding: 10px;
    margin: 0;
}

#navlist li a {
    border-right: none;
    padding: 0;
    color: #f5d7b4;
    text-decoration: none;
    display: block;
    text-align: center;
    font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navlist li a:hover {
    color: #930;
    background: #f5d7b4;
}

http://jsfiddle.net/h2Xg5/1/

チュートリアルからコードをコピーするときは注意してください。コピーする内容を常に再確認してください。

于 2013-06-27T22:25:29.740 に答える