19

これは以前に何度も発生していることは知っていますが、特定のケースでは解決策が見つかりませんでした。

私はナビゲーション バーを持っています。必要に応じて、全体<li>を「リンク」または「クリック可能」にしたいと考えています。現在、<a>（および<div>私がいじった ）のみが「クリック可能」です。

私はそのli a {display: inner-block; height: 100%; width: 100%}方法を試しましたが、結果はひどいものでした。

ソースはここにあります: http://jsfiddle.net/prplxr/BrcZK/

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="menu">
                <div id="innermenu">    
                    <ul id="menulist">       
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk2</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk3</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk4</div></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

誰もこれに対するきちんとした解決策を持っていますか?

前もって感謝します！

4

9 に答える 9

51
  • sを取り除き<div>ます。
  • <a>持つタグを設定するdisplay: block
  • パディングを から に移動し<li>ます<a>。
  • s は、<li>フローティングまたはdisplay: inline-block

例: http://jsfiddle.net/8yQ57/

于 2012-12-06T14:18:03.927 に答える
7

リンクには「表示ブロック」を使用するだけです。

ul {
  display: block;
  list-style-type: none;
}

li {
  display: inline-block; /* or block with float left */
  /* margin HERE! */
}

li a {
  display: block;
  /* padding and border HERE! */
}

これが例ですhttp://jsfiddle.net/TWFwA/ :)

于 2012-12-06T14:23:33.497 に答える
4

私自身もこの問題を抱えていました。

答えはこれ以上簡単ではありません。

<li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
Wrong:
.menuitem {
    list-style-type:        none;
    display:                 inline;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

Correct
.menuitem a {
    list-style-type:        none;
    display:                 block;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

つまり、LIが持っていたcssをA要素に適用する必要があります。Aがブロックライン要素であることを確認する

于 2012-12-06T14:20:18.847 に答える
1

私はあなたが意味していたかもしれないとinline-block思うinner-block.

li a {display: inline-block; height: 100%; width: 100%; }

また、inline-block古い IE ブラウザには独自の問題があり、期待どおりに反応しない可能性があります。

于 2012-12-06T14:18:43.170 に答える
0

これが私がすることです：

a { display: block; }

次に、適切と思われるアンカーのスタイルを設定します。

これがフィドルです：http：//jsfiddle.net/erik_lopez/v4P5h/

于 2012-12-06T14:21:50.990 に答える
0

a要素display:blockまたはを作成する必要がありますdisplay:inline-block。

于 2012-12-06T14:19:52.463 に答える
0

あなたはjqueryを使用していますか？もしそうなら、あなたはそれを試すことができます：

$("li").click(function(){
   $(this).find('a').click();
});

または、css としても使用できます。

li{
  position:relative;
}
li a {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

いずれかを選択してください...頑張ってください

于 2012-12-06T14:14:36.877 に答える
0

スタイルを使用して をa直接フォーマットするだけです。li

私はあなたのフィドルを変更しましたhttp://jsfiddle.net/BrcZK/1/

于 2012-12-06T14:16:14.100 に答える
-3

タグを移動して、<a>タグをラップし<li>ます。この回答によると、アンカータグにはインライン要素が含まれている必要があり、<li>はインラインであるように見えるため、これは有効である必要があります。

于 2012-12-06T14:13:16.800 に答える