web-dev-qa-db-ja.com

<li>全体を適切なHTMLのリンクとして作成する

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

ナビゲーションバーがあるので、<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>

誰にもこれに対するきちんとした解決策がありますか？

前もって感謝します！

htmlcssnavigationhtml-lists
16
Christian Lundahl
  • <div>sを取り除きます。
  • <a>タグをdisplay: blockに設定します
  • パディングを<li>から<a>に移動します。
  • <li>sはフロートにするか、display: inline-blockにする必要があります

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

46
Steve Pugh

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

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/ :)

6
starikovs

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

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

<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がブロックライン要素であることを確認する

4
Jamie Hutber

inline-blockではなくinner-blockを意味しているのではないかと思います：

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

また、inline-blockには、古いIEブラウザーに固有の問題があり、おそらく期待どおりに反応しません。

1
Sean

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

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

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

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

いずれかを選択してください...幸運

0
Michael Antonius

aの代わりにliをスタイルで直接フォーマットするだけです。

フィドルを変更しました http://jsfiddle.net/BrcZK/1/

0
Jona

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

0
Mitchell

ここに私がやることがあります：

a { display: block; }

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

ここにフィドルがあります： http://jsfiddle.net/erik_lopez/v4P5h/

0
Erik