html - 如何防止 anchor 填充整个包含元素的 div？

Question

我正在开发一个网站，该网站在小于特定大小时具有移动导航。

我希望用户能够点击汉堡包图标来展开菜单。

我遇到的问题是可点击区域比 anchor 标记环绕的实际图像大得多。

这是一个显示我的意思的屏幕截图。

我正在使用 chrome extension pesticide 用蓝色勾勒出不同的元素。

这是我的 HTML

<div class="row fullWidth">
    <div class="small-6 large-2 columns" id="logoContainer">
        <img src="img/vi_tie_icon_for_site.jpg" alt="VoIP Innovations" height="50" width="85" />
    </div>
    <div class="small-6 large-8 columns">
        <nav id="nav" role="navigation">
            <a href="#nav" title="Show navigation"><img src="../img/burger_icon.png" /></a>
            <a href="#" title="Hide navigation"><img src="img/x_icon.png" /></a>
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Titanium</a>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="small-12 large-2 columns" id="loginContainer">
        <p class="logIn">Log In</p>
        <p>Sign Up</p>
    </div>
</div>

还有我的 CSS

/*NAV BAR STYLES*/
#nav
{
    /* container */
    img{
        margin-top:25px;
        display:inline-block;
    }
}
    #nav > a
    {
        display: none;
    }
    #nav li
    {
        position: relative;   
        padding:15px;
        height: 100%;
        float: left;
        list-style:none;
        font-family:$googleFont;
        font-size:1.25em;
    }

    #nav li .active{
        /*ACTIVE STATE GOES HERE*/
        text-decoration:underline;
    }
        #nav li .active:hover{
            color:inherit;
        }


@media only screen and ( max-width: 1023px )
{
    #nav
    {   
        z-index:10;
        position: relative;
    }
        #nav > a
        {
        }
        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type
        {
            display: block;
        }

    /* first level */

    #nav > ul
    {
        background:black;
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
        #nav:target > ul
        {
            display: block;
        }
        #nav > ul > li
        {
            width: 100%;
            float: none;
        }


}

Answer 1

问题是您需要将“汉堡包”锚定为内联 block 。默认情况下， block 元素占据父元素的整个宽度。

Fiddle

@media only screen and ( max-width: 1023px )
{
    #nav
    {   
        z-index:10;
        position: relative;
    }
        #nav > a
        {
        }
        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type
        {
            display: inline-block;
        }

    /* first level */

    #nav > ul
    {
        background:black;
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
        #nav:target > ul
        {
            display: block;
        }
        #nav > ul > li
        {
            width: 100%;
            float: none;
        }


}