Question

我非常擅长HTML / CSS并且在响应式网站上工作。我确信我现在有一些不正确的技术，但到目前为止美学上的东西对我来说还不错。当我的屏幕尺寸低于全视图时，我的问题是有效的。大约768只有1个链接（联系链接）似乎工作，我不知道为什么。任何帮助将非常感激！谢谢！

HTML：

</head>
<body>
<div id="wrapper">
    <div id="header">
     <h1>my<br/>name</h1>
        <div id="nav">
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">SERVICES</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>

    </div>
    <div id="content">
        <div id="feature">
            <p>Feature</p>
        </div>
        <div class="article column1">
            <p>Column One</p>
        </div>
        <div class="article column2">
            <p>Column Two</p>
        </div>
        <div class="article column3">
            <p>Column Three</p>
        </div>
    </div>
    <div id="footer">
        <p>Footer Text</p>
    </div>

    </div>
    </body>
 </html>

CSS：

body {
    max-width: 90%;
    margin: 0 auto;
    font-size: 100%;
     }



h1 {
    font-family: 'bikoblack';
    text-transform: uppercase;
    font-size: 3em;
    line-height: 85%;
    color: #2d9471;
    background-color: #1a5642;
    float: left;
    padding: 1em;
    }



    #header {
    overflow: hidden;
    z-index: ""; 
    }

#nav {
    position: relative;
    top: 11em; 
    margin-bottom: 1 em;
    }

li {
    display: inline;
    font-family: 'bikoregular';
    color: #2d9471;
    padding: 4em;
    }



#feature{
    margin: 1%;
    background-color: #1a5642;
    padding: 5em;
    }


.column1, .column2, .column3 {

    width: 31.3%;
    float: left;
    margin: 1%;
    background-color: #1a5642;
    }

.column3 {
    margin-right: 0%;}
    }

#feature, .article {
    margin-bottom: 1em;
        }

 @media (max-width:480px){
#nav {
    position: relative;
    top:.05em;
    width:200px;


    }    
}

 @media (max-width:767px) and (min-width:481px){
#nav {
    position: relative;
    top: 5em; 


    }    
}

Answer 1

导航中的列表项具有较大的填充，并且它们也是内嵌的。当它们在下一行中断时（因为没有足够的水平空间）它们重叠。列表中最后一个的填充扩展到上面的链接并覆盖它们。这就是你无法点击它们的原因。

尝试将其作为快速解决方法：

li {
    display: inline;
    font-family: 'bikoregular';
    color: #2d9471;
    padding: 0 4em; /* removed padding at the top and bottom */
}

屏幕尺寸减小时，链接无法在现场工作

1 个答案: