內聯塊最後一項包裝，但有足夠的空間

我試圖讓我的菜單右側使用文本對齊：右側的父和顯示：內聯塊在菜單上。（請參閱示例：http://codepen.io/sanns/pen/WQjRoj?editors=110）我還希望菜單中的項目左對齊，所以我在'li'上使用了text-align：左邊。但問題在於，儘管所有元素都有足夠的寬度，但由於某種原因，最後一個項目仍會包裝。爲什麼會發生？謝謝！內聯塊最後一項包裝，但有足夠的空間

<div class="col-sm-9 text-right" ><ul class="navg" ><li class="navg__item navg__item--active" ><a href="#" class="navg__link">Главная</a></li> 
    <li class="navg__item"><a href="#" class="navg__link">Услуги</a></li> 
    <li class="navg__item"><a href="#" class="navg__link">On-line заказ</a></li> 
    <li class="navg__item"><a href="#" class="navg__link">О компании</a></li> 
    <li class="navg__item"><a href="#" class="navg__link">Контакты</a></li> 
    </ul> 
</div> 







.navg { 
    display: inline-block; /* to aplly parents text-align*/ 
    text-align: left; /* align children*/ 
} 

.navg__item { 
     margin-right: 2.5%; 
     display: inline-block; 
     margin-bottom: 5px; 
}

來源

2015-10-06 Alexander Virko

.navg__item { 
    margin-right: 2.5%; 
}

如果你看看那2.5％，這是你的項目將新的生產線的原因。邊距的百分比是根據元素的寬度計算的。

如果你不喜歡的東西

.navg__item { 
    margin-right: 10px; 
}

它應該工作。

一些更多的信息在這裏：http://www.w3.org/TR/CSS2/box.html#margin-properties

特別是這部分

百分比 - 百分率的計算相對於所生成的框的包含塊的寬度。請注意，'margin-top'和'margin-bottom'也是如此。如果包含塊的寬度取決於這個元素，那麼結果佈局在CSS 2.1中是未定義的。

來源

2015-10-06 07:21:30 Paran0a

哦，謝謝！如果寬度是按內容計算的，則內容百分比是由父代計算的，因此令人困惑：P –

只是刪除display: inline-block從.navg類

.navg { /* to aplly parents text-align*/ 
 
    text-align: left; /* align children*/ 
 
} 
 

 
.navg__item { 
 
     margin-right: 1%; 
 
     display: inline-block; 
 
     margin-bottom: 5px; 
 
}

<div class="col-sm-9 text-right" > 
 
    <ul class="navg" > 
 
    <li class="navg__item navg__item--active" ><a href="#" class="navg__link">Главная</a></li> 
 
    <li class="navg__item"><a href="#" class="navg__link">Услуги</a></li> 
 
    <li class="navg__item"><a href="#" class="navg__link">On-line заказ</a></li> 
 
    <li class="navg__item"><a href="#" class="navg__link">О компании</a></li> 
 
    <li class="navg__item"><a href="#" class="navg__link">Контакты</a></li> 
 
    </ul> 
 
</div>

來源

2015-10-06 07:26:13 niyasc

內聯塊最後一項包裝，但有足夠的空間

回答

相關問題