inline-block 最后一项包装，但有足够的空间答案

【问题标题】：inline-block last item wrapping, but there is enough spaceinline-block 最后一项包装，但有足够的空间
【发布时间】：2019-04-23 19:48:02
【问题描述】：

我正在尝试使用父级上的 text-align:right 使我的菜单位于右侧，并在菜单上显示：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>

【问题讨论】：

标签： html css

【解决方案1】：

.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 中未定义。

【讨论】：

哦，谢谢！当宽度是按内容计算的，而内容百分比是按父项计算时，那么混乱：P

【解决方案2】：

只需从 .navg 类中删除 display: inline-block

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

【讨论】：