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

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>

Answers


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


When I tried display: inline-block; it removes the bullet.

Instead, I use float:left; to have them only as wide as text, while preserving the bullet. Optionally, add clear:both; to keep it as a vertical list with each item on a new line.

CSS

.my-list > li {
    float: left;
    clear: both; /* remove this if you want them flowing inline */
}

HTML

<ul class="my-list">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
</ul>

Prevent it becoming a block by adding display: inline-block; to the proper element. Post more code and preferably CSS if you want details.


Need Your Help

How to set the layout gravity for a layout, for example a FrameLayout?

android-layout gravity

How to set my FrameLayout's layout gravity programatically ?

Splashscreen in Java

java swing text splash-screen splash

I need to figure out where in this code I need to adjust it to move the line "Splash Screen!!!" to the middle of the screen and possibly make it bigger. I am not sure where in the code this is and...