Bullets are hidden when display: inline is used

Question

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

score 2 · Accepted Answer · answered Nov 27 '21 at 08:46

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>

score 2 · Answer 2 · answered Nov 27 '21 at 08:51

You can use this styles.

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

Is this you want You can make the ul a flex box! If you want to know more about bullets in css, see this w3schools docs

https://www.w3schools.com/css/css_list.asp

score 2 · Answer 3 · answered Nov 27 '21 at 08:51

I think inline negates the bullet, but using flex with flex-direction: row; on the ul declaration will have the effect you are looking for...

ul {
  flex-direction: row;
  display: flex;
}

.list {
}

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

<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>

score 1 · Answer 4 · answered Dec 06 '21 at 18:12

Adding another answer just for fun.

You can use the float property to float the list items to the left or right of its parent container [ but make sure to always use overflow on the parent element or use clear property on the next element to clear the side effects of float ]

.list-inline{
   overflow: auto;
}

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

<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>

Bullets are hidden when display: inline is used

4 Answers4