問題描述
我知道這已經(jīng)出現(xiàn)過很多次了，但我在我的具體情況下找不到任何解決方案.
I know this has been up a lot of times before, but I couldn't find any solution in my specific case.
我有一個(gè)導(dǎo)航欄，如果你愿意的話，我希望整個(gè) <li> 都被鏈接"或可點(diǎn)擊".現(xiàn)在只有 <a> (以及我擺弄過的 <div> )是可點(diǎn)擊的".
I've got a navigation bar and I want the whole <li>'s to be "linked" or "clickable" if you will. Now only the <a> (and the <div>'s I've fiddled with) is "clickable".
我試過 li a {display: inner-block;高度:100%；width: 100%} 方法，但結(jié)果很糟糕.
I've tried the li a {display: inner-block; height: 100%; width: 100%} method but the results where just horrible.
來源可以在這里找到:http://jsfiddle.net/prplxr/BrcZK/
<!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>
有人對(duì)此有一個(gè)巧妙的解決方案嗎?
Do anyone have a neat solution to this?
提前謝謝你！
推薦答案
- 擺脫
<div>. - 將
<a>標(biāo)簽設(shè)置為具有display: block - 將填充從
<li>移動(dòng)到<a>. <li>需要浮動(dòng)或display: inline-block- Get rid of the
<div>s. - Set the
<a>tags to havedisplay: block - Move the padding from the
<li>to the<a>. - The
<li>s will need to be either floated ordisplay: inline-block
示例:http://jsfiddle.net/8yQ57/
這篇關(guān)于讓整個(gè)<li>作為與正確 HTML 的鏈接的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！