0

この男がここで尋ねたのと同じ質問があります。クリック可能な領域を大きくするために、<a>タグをその親の<li>タグのサイズにするにはどうすればよいですか？

ただし、これらのLIアイテムはインラインメニューのようにしたいので、互いに並べて表示したくありません。どのように活動可能ですか？

4

6 に答える 6

3

さまざまなオプションがありますが、カスタマイズが簡単なものがあります：http: //jsfiddle.net/panchroma/WuhVp/
HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul> 
</div>

CSS 

#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: olive;
color: White;
float: left;
width: 100%;
font-family:sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: olive;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
于 2013-03-25T16:49:06.320 に答える
1

これを試して li a{ height:100%; width:100%} 、「li」要素の下の「a」要素にその親の幅と高さを持たせます

于 2013-03-25T16:40:05.707 に答える
1

最も単純なマークアップは次のようになります。

  • -要素が浮くため、li水平に並んでいます
  • a-タグは、display: block;親の中にあるスペースを占める必要があります
  • その子供たちのフロートをクリアする必要がありulますoverflow: hidden;

デモ

購入する前に試してください

HTML

<ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
</ul>

CSS

ul {
    overflow: hidden;
    list-style: none;
}

ul > li {
    float: left;
}

ul > li > a {
    display: block;
}
于 2013-03-25T16:56:11.073 に答える
1

セットする

float:left; to the  class controlling li

これはあなたを助けます。また、liが設定されているのと同じくらいクリック可能にしたい場合は、anchor<a>のプロパティを次のように設定します。

display:block;
height:value as you like px;
Width:value as you like px;
于 2013-03-25T17:03:01.863 に答える
0

トリックはとても簡単です。より大きいを維持paddingします。<a><li>

li { padding: 0; }
a { padding: 1.1em; }
于 2013-03-25T16:47:57.153 に答える
0

かなり簡単な方法は次のとおりです。

ul {
    list-style-type: none;
}

li {
    float: left;
}

a {
    display: block;
}

次に、それに応じて、任意の高さ、幅、行の高さ、およびパディングを追加できます。

次に例を示します：http： //jsfiddle.net/BBcEr/2/

于 2013-03-25T16:56:40.247 に答える