没有浮动的权利

Question

嗨伙计们（和gals）我只是想把一个表格对准我的导航栏右边，现在我正在使用浮动，但问题是一旦窗口尺寸变得太小而不适合它在一行上，它跳出导航栏，而不是随后的导航栏，所以我的问题是：

如何在没有浮动或绝对定位的情况下向右对齐。这是我现在的代码：

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

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