2

そのため、私が取り組んでいるサイトには水平ナビゲーション メニューがあります。関連するコードは次のとおりです。

HTML:

<div class="nav">
<ul>
    <a href="index.html">
        <li>Home</li>
    </a>
    <a href="about.html">
        <li>About Us</li>
    </a>
    <a class="active" href="perspective.html">
        <li>Our Perspective</li>
    </a>
</ul>

CSS:

.nav ul a li{
    padding: 5px 15px;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: inline-block;
}

.nav ul a{
    color: #1d1d1d;
    text-decoration: none;
    font: bold .8em Georgia, "Times New Roman", Times, serif;
}

.nav ul a:hover li{
    background-color: rgba(0, 0, 0, 0.44);
    opacity: 1;
    -moz-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
}

.nav ul a.active li{
    background-color: rgba(0, 0, 0, 0.44);
    opacity: 1;
    -moz-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
}

ここでサイトを表示できます: pc.kraigh.com

そのため、何らかの理由で、リストが水平ではなく垂直にレンダリングされることがあります。また、ブラウザーが list-style:none を無視しているかのように、(常にではありませんが) 各 li に箇条書きが表示されることがあります。

これを引き起こしている CSS セレクターに何か問題がありますか? たまにしか起こらないのはなぜですか？

注: エラーを再現するには、ページをすばやく変更するか、ページを数回更新してみてください。これが時々起こることを証明するための（へのリンク）スクリーンショットです！

エラーのスクリーンショット (Imgur リンク)

編集：さて、それが必要であることは理解しましたが、リンクテキストだけでなく、領域全体をクリックできるようにし<ul><li><a>たかったのです。<li>これを行う方法はありますか？

4

3 に答える 3

1

<li>の直接の子である必要があります<ul>:

正解です：

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About Us</a></li>
  <li><a class="active" href="perspective.html">Our Perspective</a></li>
</ul>

widthとline-heightをに割り当てて、<li>完全にクリック可能にすることができます。また、padding役立ちます。

于 2012-04-23T23:01:01.983 に答える
0

<li>要素を<a>タグでラップしているという事実と関係があるのではないかと思います。

する必要があります<ul><li><a>

<li>タグは単なるホルダーであり、<a>タグはクリック可能な部分である必要があります。スタイルをいじって、多分次のようなものdisplay: block; padding: 10px;

于 2012-04-23T22:59:12.483 に答える
0

JSFiddle の例:

http://jsfiddle.net/ZCnbB/2/

<div class="nav">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a class="active" href="perspective.html">Our Perspective</a></li>
</ul>
</div>​

css を少し変更しました。

.nav ul {
    display: block;
    text-align: center;
}

.nav ul li {
    display: inline-block;
}
于 2012-04-23T23:01:29.540 に答える