位置不正確浮

嗨，大家好（和加爾斯）我只是想對齊表格到我的導航欄的右側，現在我使用的是浮動的，但問題是，一旦窗口大小成爲過小這一切，以適應在一行，它跳躍的，而不是與它下面的導航欄導航欄之外，所以我的問題是：位置不正確浮

我該如何調整到正確的，沒有浮動或絕對定位。這是我的代碼現在：

.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 enter image description here

來源

2013-04-26 Datsik

你爲什麼反對絕對定位？如果你讓你吧'位置：relative'，那麼你完全可以在相對定位容器內放置在窗體（'右：0'） – Dave 2013-04-26 23:44:49

您可以通過在.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">

導航欄現在將垂直擴展，以彌補缺乏的水平空間。

來源

2013-04-26 23:38:34 Axel

感謝這個，但它是如何工作的？還有任何想法，爲什麼我的填充物將英雄身體的右側推出？ – Datsik 2013-04-26 23:42:24

位置不正確浮

回答

相關問題