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

Question

我正在尝试在父级上使用 text-align:right 并在菜单上使用 display: inline-block 使我的菜单位于右侧。 (参见示例:http://codepen.io/sanns/pen/WQjRoj?editors=110)

我还希望菜单中的元素左对齐，所以我在 li 上使用了 text-align:left。但问题是，尽管所有元素都有足够的宽度，但出于某种原因，最后一项会换行。

为什么会这样？

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

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

Answer 1

.navg__item {
    margin-right: 2.5%;
}

如果您查看 2.5% ，这就是您的商品换行的原因。边距的百分比是根据元素的宽度计算的。

如果你做了类似的事情

.navg__item {
    margin-right: 10px;
}

它应该可以工作。

这里有更多信息:http://www.w3.org/TR/CSS2/box.html#margin-properties

特别是这部分

Percentage - The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.