Question

我这里的代码正在运行（在我的屏幕上），但是我能够通过在px中使用填充来显示底部边框，以便它接触导航栏（出现在导航栏的底部）。我的问题是，因为这使用px填充，在屏幕尺寸改变时它可能不会触及导航栏。是的我知道我必须要做的媒体查询，但我很好奇我的解决方案是最有效的还是我错过了什么。我在这工作了几个小时，我觉得现在是个好时机。

我首先使用float / clearfix作为导航首选项，但如果您认为更好，我可以切换到内联块。

确保你们得到我想要的东西;这是我希望导航器在悬停时拥有的示例屏幕截图。

这是我的代码段，这是一个带有示例代码段http://codepen.io/willcodes/pen/gryvYN

的codepen

没有问过很多问题所以我希望这是足够的信息

<body>
    <header>
    <div class="wrapper">
        <!--      nav        -->
        <nav class="clearfix">
            <div class="logo clearfix"><img src="https://i.imgsafe.org/7531c53733.png" alt=""></div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Pages</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blogs</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact</a></li>
                <li class="search"><a href="">SR</a></li>
                <li class="hamburger"><a href="">MN</a></li>
            </ul>
        </nav>
        <!-- landing stuff -->
        <h1>Welcome</h1>
        <p> Tagline oh yeah</p>
        <button class="btn">Features</button>
        <button class="btn">Get Started</button>
    </div>
    </header>


</body>

的CSS：

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body,
html{
    font-family: 'Lato', sans-serif;
    font-size:62.5%;
    margin:0 auto;
    padding:0;
    width:100%;
}

header{
    font-family: 'Roboto', sans-serif;
    font-size:2.5rem;
    text-transform: uppercase;
    text-align: center;
    background:black;
    background-size: cover;
    padding:1px;
    color: white;

}

p{
    font-size: 1.2rem;
    text-transform: none;
}

h1{
    margin:0 auto;
    margin-top:5%;
    padding: 1%;
    border:4px solid white;
    width:60%;
}

button{
    margin-bottom:2.5%;
    font-size:1.5rem;

}

.wrapper{
    width:70%;
    max-width:1480px;
    margin:1% auto;
    background: transparent;
}

/* nav */


nav{
    background: white;
    width:100%;

}

.logo{
    width:40%;
    float:left;
    margin:0;
  padding:10px;
}
.logo img{
    float:left;
    max-width:100%;
}

nav ul{
  margin:0;
  margin-top:2.5%;
    width:60%;
    float:left;
    font-size:1.2rem;
    text-align: right;
    padding:0;
}

nav ul li{
    margin-right:1.5%;
    float:left;
  list-style:none;
}

nav ul li a{
 text-decoration:none;
 color:black;
 display: block;
 padding:40px 0;
    border-bottom:5px solid transparent;
}
nav ul li a:hover{
  border-bottom:5px solid gray;
}

Answer 1

我认为您的解决方案效果很好。我在各种分辨率上测试了它并且工作正常。然而，问题在于，在某个屏幕分辨率下，导航菜单开始分解成另一行，破坏了一行流，并搞乱了一切。我个人发现这发生在1053px及以下，这是你应该声明一个媒体查询，要么添加一些css，以允许它保持在较小设备的一行。

就我个人而言，我建议确保某种方式导航保持在一条线上直到大约1024px，然后下面的任何东西只是扔进一个汉堡包式导航按钮。尽管如此。

带有图像的响应式导航，悬停时触摸导航栏的底部边框

1 个答案: