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

我认为您正在寻找的是：

＆＃13;

@media screen and (max-width: 850px) { 

    * {
       box-sizing: border-box;
    }
    .logo {
        display: block;
    }
    nav {
        background-color: aliceblue;
        float: none;
        display: block; 
        overflow: hidden;
    }
    nav ul {
        margin: 0;
        padding: 0;
    }
    nav li {
        list-style: none;
        float: left;
    }
    nav li a { 
      background-color: #999;
        padding: 30px;
        display: block;
    }
    nav ul {
      width: 100%; 
    }
}

＆＃13;

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

＆＃13;

Answer 2

将显示块添加到锚标记

检查fiddle

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

CSS问题样式导航标记

2 个答案: