Make whole <li> as link with proper HTML-第2页回答

Make whole

as link with proper HTML

2019-03-13 01:03发布

I know this has been up a lot of times before, but I couldn't find any solution in my specific case.

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".

I've tried the li a {display: inner-block; height: 100%; width: 100%} method but the results where just horrible.

The source can be found here: 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>

Do anyone have a neat solution to this?

Thank you in advance!

标签： html css navigation html-lists

9条回答

干净又极端

2楼-- · 2019-03-13 02:02

Just format the a directly instead of the li with your styles.

I have alterd your fiddle http://jsfiddle.net/BrcZK/1/

0人赞添加讨论(0) 举报

仙女界的扛把子

3楼-- · 2019-03-13 02:04

I think you may have meant inline-block, not inner-block:

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

Also, inline-block has its own set of problem with older IE browsers, and probably won't react how you'd expect.

0人赞添加讨论(0) 举报

傲

4楼-- · 2019-03-13 02:05

You should make the a elements display:block or display:inline-block.

0人赞添加讨论(0) 举报

上一页 1 2

Make whole as link with proper HTML

HTML

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

Make whole
as link with proper HTML