没有浮动的正确位置 [英] Position right without float

问题描述

伙计们(和女孩们)，我只是想将一个表单与我的导航栏的右侧对齐，现在我正在使用浮动，但问题是一旦窗口大小变得太小而无法适应一方面，它跳到导航栏之外，而不是跟随它的导航栏，所以我的问题是:

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

.navbar .form {浮动:对；显示:内联；行高:43px；}

我的 hero-body 类上的填充也会导致边框的右侧超出容器，我该如何解决?

.hero-body {背景:-webkit-linear-gradient(左，#FFFFFF 0，#FFFFFF 85%，#EEEEEE 100%)；边框半径:5px；框阴影:1px 1px 5px #ccc;宽度:100%；}

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

解决方案

您可以通过在 .navbar 上应用 clearfix 来解决此问题.

添加这个

.clearfix:after {可见性:隐藏；显示:块；字体大小:0；内容: " ";清楚:两者；高度:0；}.clearfix { 显示:内联块；}/* 开始注释反斜杠 hack \*/* html .clearfix { 高度:1%；}.clearfix { 显示:块；}

添加 .clearfix 类:

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

Hi guys (and gals) I'm just trying to align a form to the right of my navbar, right now I'm using a float, but the problem is once the window size becomes too small for it all to fit on one line, it jumps outside the navbar, instead of the navbar following with it, so my question is:

How can I align to the right, without float or absolute positioning. This is my code right now:

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

Also the padding on my hero-body class causes the right side of the border to push out past the container, how can I fix that?

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

Demo: http://codepen.io/anon/pen/HlhEj

解决方案

You can fix this by applying a clearfix on the .navbar.

Add this

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

Add the .clearfix class:

<div class="navbar clearfix">

The navbar will now expand vertically to compensate for the lack of horizontal space.

这篇关于没有浮动的正确位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！