内联块最后一项包装，但有足够的空间

我试图让我的菜单右侧使用文本对齐：右侧的父和显示：内联块在菜单上。（请参阅示例：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

内联块最后一项包装，但有足够的空间

回答

相关问题