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