Css 位置正确，无浮动

大家好，我只是想在导航栏的右边对齐一个表单，现在我使用的是浮动，但问题是一旦窗口太小，无法全部放在一条线上，它就会跳出导航栏，而不是跟随它的导航栏，所以我的问题是：

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

.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%;
}

演示：

---

您可以通过在

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

---

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

谢谢，但它是如何工作的？还有，你知道为什么我的填充物会将英雄身体的右侧推出吗？你为什么反对绝对定位？如果将条形码设置为position:relative，则可以将表单绝对放置在相对位置的容器中（

右侧：0

）