位置不正确浮

Question

嗨，大家好（和加尔斯）我只是想对齐表格到我的导航栏的右侧，现在我使用的是浮动的，但问题是，一旦窗口大小成为过小这一切，以适应在一行，它跳跃的，而不是与它下面的导航栏导航栏之外，所以我的问题是：

我该如何调整到正确的，没有浮动或绝对定位。这是我的代码现在：

.navbar .form { 
    float: right; 
    display: inline; 
    line-height: 43px; 
} 

而且我hero-body类填充使边界，推动了过去容器的右侧，我该怎么解决呢？

.hero-body { 
    background: -webkit-linear-gradient(left, #FFFFFF 0, #FFFFFF 85%, #EEEEEE 100%); 
    border-radius: 5px; 
    box-shadow: 1px 1px 5px #ccc; 
    width: 100%; 
} 

演示：http://codepen.io/anon/pen/HlhEj

Answer 1

您可以通过在.navbar应用clearfix解决这个问题。

添加此

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 

添加.clearfix类：

<div class="navbar clearfix"> 

导航栏现在将垂直扩展，以弥补缺乏的水平空间。