Сделать все вертикальные разделители на одинаковой высоте

Question

У меня есть панель навигации Bootstrap с несколькими ссылками в ней и верительные разделители между ними. Проблема в том, что когда ширина экрана составляет ~ 1100px - ~ 770px, разделители не имеют одинаковой высоты. вот их CSS код:

.navbar-default li + li { 
    background:url('../images/buffer1.png') no-repeat top right; 
    background-size: auto 90%; 

} 

Я предполагаю, что это из-за использования процент, но я должен использовать его в связи с адаптивным дизайном (когда экран получить меньше li's ширина меняется и сепаратор должен подхожу к их высоте ...

Вот живой пример:.

http://www.bootply.com/KuD2TuYe0H

Я ищу решение (CSS только лучше), которые делают весь сепаратор с одной и той же высотой

Answer 1

Одним из решений является перемещение с нижним краем/отступом. Работает в IE7 +.

.navbar .nav { 
    overflow: hidden; 
    margin: 0; 
    width: 100%; 
    direction: rtl; 
} 

.navbar .nav > li { 
    float: right; 
    display: inline-block; 
    width: auto; 
    text-align: center; 
    padding-bottom: 10000px; 
    margin-bottom: -10000px; 
    direction: rtl; 
    width: calc(100%/7.0); 
    font-family: Tahoma, Verdana, Segoe, sans-serif; 
    font-size: 14px; 
    font-weight: bold; 
    /* border-left: 1px solid #d4d4d4; */ 
} 

.nav > li { 
    padding-bottom: 10000px; 
    margin-bottom: -10000px; 
} 

.navbar-default .navbar-nav>li>a { 
    color: #777; 
    background-color: #f8f8f8; 
}