html - CSS 问题样式导航标签

Question

我正在尝试制作导航栏。我在导航元素周围应用填充，但它正在脱离其父导航标签。如何处理这类问题。谢谢

HTML

<header>
        <div class="wrap">
            <a href="#" class="logo"><img src="logo.jpg"></a>
            <nav>
                <ul>
                    <li><a href="">My Link 1</a></li>
                    <li><a href="">My Link 2</a></li>
                    <li><a href="">My Link 3</a></li>
                    <li><a href="">My Link 4</a></li>
                </ul>
            </nav>
        </div>

    </header>

CSS

@media screen and (max-width: 850px) { 

    * {
       box-sizing: border-box;
    }
    .logo {
        display: block;
    }
    nav {
        background-color: aliceblue;
        float: none;
        display: block; 
    }
    nav li {
        /* padding: 5px; */
        display: block;
        width: 100%;
    }
    nav li a { 
      background-color: #999;
        padding: 30px;
        width: 100%;
        height: 100%;
    }
    nav ul {
    width: 100%; 
    }
}

Answer 1

给 anchor 标签添加显示 block

检查 fiddle

nav li a { 
      background-color: #999;
        padding: 30px;
        width: 100%;
        height: 100%;
        display: block;
}