76

私は次のマークアップを持っています、

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

は<li>少し大きく、左側に小さな画像があります。実際にをクリックして<a>リンクをアクティブにする必要があります。<li>リンクをアクティブ化するためにクリックするにはどうすればよいですか？

編集1：

ul#menu li
{
    display:block;
    list-style: none;
    background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

ul#menu li a
{

    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}
4

14 に答える 14

130 
#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

IE6には微調整が必​​要かもしれませんが、それはあなたがそれを行う方法についてです。

于 2009-07-13T20:08:23.423 に答える
24

Marineio が言ったように、javascriptを使用して、 のonclick属性を使用し<li>て変更することができます。location.href

<li onclick="location.href='http://example';"> ... </li>

または、 の余白やパディングを削除<li>し、 の左側に大きなパディングを追加して、<a>テキストが箇条書きを超えないようにすることもできます。

于 2009-07-13T20:16:47.510 に答える
15

このオプションをそこに放り込むだけです：

<ul id="menu">
    <a href="#"><li>Something1</li></a>
    <a href="#"><li>Something2</li></a>
    <a href="#"><li>Something3</li></a>
    <a href="#"><li>Something4</li></a>
</ul>

これは私がメニューで使用しているスタイルで、リスト項目自体をハイパーリンクにします (画像をリンクにするのと似ています)。
スタイリングには、通常、次のようなものを適用します。

nav ul a {
    color: inherit;
    text-decoration: none;
}

その後、 <li> に任意のスタイルを適用できます。

注:バリデーターはこの方法に文句を言うでしょうが、もしあなたが私のようで、バリデーターに基づいていないのであれば、これは問題なく機能するはずです。

于 2013-07-05T14:03:24.277 に答える
12

リンクテキストを「p」タグなどでラップして追加し、その要素にマージンとパディングを追加するだけです。これにより、MiffTheFoxが提供する設定に影響を与えることはありません。

<li> <a href="#"> <p>Link Text </p> </a> </li>
于 2012-02-20T16:25:54.400 に答える
8

<li>これにより、オブジェクト 全体がリンクとして作成されます。

<li onclick="location.href='page.html';"  style="cursor:pointer;">...</li>
于 2011-11-06T22:54:53.853 に答える
2

以下はうまくいくようです：

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}
于 2009-07-13T20:32:31.987 に答える
1

または、あなたの最後に空のリンクを作成することができます<li>:

<a href="link"></a>

.menu li{position:relative;padding:0;}
.link{
     bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
}

これにより、完全なクリック可能が作成<li>され、実際のリンクで書式設定が維持されます。<div>タグにも使えそう

于 2014-08-30T00:01:18.983 に答える
1

アンカー href リンクは li に適用されます:

#menu li a {
       display:block;
    }
于 2019-04-02T06:40:15.760 に答える
0

LIタグ内で「onclick」イベントを試して、javascriptのように「location.href」を変更することができます。

タグ内にliタグを配置することもできますが、これはおそらく有効なHTMLではありません。

于 2009-07-13T20:09:00.490 に答える
-1

<li> をクリックして HTML リンクをアクティブにする方法は?

あなたのリンクをあなたのliと同じくらい大きくすることによって: 指示を移動するだけです

display: block;

li から a までで完了です。

あれは：

#menu li
{
    /* no more display:block; on list item */

    list-style: none;
    background: #e8eef4 url(arrow.gif) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

#menu li a
{
    display:block; /* moved to link */
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

補足: 2 つのセレクターから「ul」を削除できます: #menu は、他の命令をオーバーライドするためにこれら 2 つのルールに重みを付ける必要がある場合を除いて、十分な指標です。

于 2009-07-13T20:42:55.070 に答える