Justified navbar and display inline-block with Bootstrap - html

Question

I have created a justified navbar in Bootstrap 3. My problem is that when I add a display:inline-block to vertically align my items, the active and clickable area doesn't fill the width and height beetween the borders anymore (please bear with me, my english is rusty).
HTML:
<div class="container">
<nav role="navigation" class="navbar-justified">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu produits</span>
<i class="fa fa-bars fa-2x"></i>
</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav nav-justified">
<li>Aliquam bibendum</li>
<li>Aliquam</li>
<li>Praesent eros ipsum</li>
<li>Quisque</li>
<li>Suspendisse id dapibus</li>
<li>Nullam consectetur dictum</li>
<li>Lorem</li>
<li>Aliquam bibendum</li>
</ul>
</div>
</nav>
CSS:
.nav-justified {
text-align: center;
}
.nav-justified > li > a {
color: #2f2f2f;
font-size: 12px;
display:inline-block;
vertical-align:middle;
}
#media (min-width: 768px) {
.nav-justified > li {
border-right: 1px solid #d5d5d5;
}
}
.nav-justified > li:last-child {
border-right: 0;
}
Here is a Bootply link to see the code in action : http://www.bootply.com/Zkl1LHJr1v

Answer 1

Add width: 100%; to .nav-justified > li > a. Then it should cover the whole length between the borders.

Answer 2

Since li is display: table-cell, its height increases due to two-lined a. However, small as don't get the same height, so I think you could add :hover to the li as a hack to achieve the same effect.
li:hover {
background: #EEE;
}
Till you find any better solution.