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

Question

I am trying to make my menu to the right side using text-align:right on the parent and display: inline-block on menu. (see example: http://codepen.io/sanns/pen/WQjRoj?editors=110 )

I also want items in menu align left, so I used text-align:left on li . But the problem is that the last item for some reason wraps despite there's enough width for all elements.

Why is it happening?

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

If you look at that 2.5% , that is the reason your item is going to new line. % of margins are calculated against width of the element.

If you did something like

.navg__item {
    margin-right: 10px;
}

It should work.

Some more information here : http://www.w3.org/TR/CSS2/box.html#margin-properties

Especially this part

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.

Answer 2

Just remove display: inline-block from .navg class

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