Question

我正在创建一个带有响应式导航的网页。我想我几乎就在那里，除了一个非常令人困惑的clearfix问题..

我试图在jsfiddle中复制错误，但遗憾的是无法解决。这就是我将整个网页上传到this链接的原因。

问题在于，当重新调整页面大小时，响应式导航切换位于标题下方，而不是标题顶部。这是由于nav-toggle类中的floating property = right。

我一直在尝试添加一个clearfix：

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

到这样的父div：

<div class="row head clearfix"> <!-- Start Row -->

也是这样的：

<nav class="nav-collapse clearfix"> 
  <ul class="clearfix">

但是，当重新调整屏幕大小（＆lt; 768px）时，响应式导航切换位于标题下方。

有人能告诉我如何解决这个小而烦人的问题吗？

Answer 1

问题是div通常覆盖整行，因此下一个元素会自动跟在它们下面。要实现您想要的，只需添加

.logo-small{
   float:left;
}

并定位导航切换。

.nav-toggle {
  float: right;
  margin-top: 50px;
}

CSS clearfix无法正常工作，为什么？

1 个答案: