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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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