Question

我正在尝试使用text-align：右边的菜单右侧显示父菜单并显示：菜单上的内联块。（见例：http://codepen.io/sanns/pen/WQjRoj?editors=110）

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

为什么会这样？

.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

特别是这部分

百分比 - 百分比是根据生成的框的包含块的宽度计算的。请注意，对于“margin-top”和“margin-bottom”也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

Answer 2

只需从display: inline-block类

中删除.navg即可

＆＃13;

.navg { /* to aplly parents text-align*/  
    text-align: left; /* align children*/
}

.navg__item {
        margin-right: 1%;
        display: inline-block;
        margin-bottom: 5px;
}

＆＃13;

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

＆＃13;

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

2 个答案: