2

嗨伙计们（和女孩）我只是想将一个表单对齐到我的导航栏的右侧，现在我正在使用浮动，但问题是一旦窗口大小变得太小而无法全部放在一条线上，它跳到导航栏之外，而不是跟随它的导航栏，所以我的问题是：

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

.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 在此处输入图像描述

4

1 回答 1

1

您可以通过在.navbar.

添加这个

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

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

于 2013-04-26T23:38:34.380 回答