Bullets are hidden when display: inline is used

November 27, 2021

So I want to display <li> items in line. But when I use display:inline property in CSS bullets becomes hidden. I tried this from Question

HTML

<div class="list">
        <ul class="list-inline">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </div>

and the CSS

.list{
   display: inline;
}
.list-inline li{
    margin: 10px;
    display: inline;
}

display: inline seems to work but bullets become hidden. How can I fix this? Check out the JSFiddle

>Solution :

you can use display: flex; for list-inline class.

.list{
   display: inline;
}

.list-inline {
  display: flex;
}
.list-inline li{
    margin: 10px;
    /* display: inline; */
}

<div class="list">
        <ul class="list-inline">
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </ul>
</div>