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

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>

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