How to make the <li> item width fit the text length?

Issue

How can I make the <li> item width fit the text length in Bootstrap 3? My menu item is shorter than the text which causes my class="active" to look ugly.

This is the navbar in which it occurs:

<div id="menu" class="col-md-1">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Startseite</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div>

Solution

make a .custom_li class and give

.custom_li{
   display:inline-block;
}

EDIT

To force same size, i'll suggest using max-width and place it under some media-query

li{
    display: inline-block;
    max-width:50%; /* limit width */
    word-break:break-all; /* wrap extended text*/
    border:1px solid red /* demo */
}

demo here

some optional things

some optional things

Answered By - NoobEditor