I want to render this list in a single line.
Should be shown as
*List item2 *List item2
What CSS style to use?
This question is related to
css
HTML code:
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
CSS code:
ul.list li{
width: auto;
float: left;
}
in bootstrap use .list-inline
css class
<ul class="list-inline">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ref: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h
In modern browsers you can do the following (CSS3 compliant)
ul_x000D_
{_x000D_
display:flex; _x000D_
list-style:none;_x000D_
}
_x000D_
<ul>_x000D_
<li><a href="">Item1</a></li>_x000D_
<li><a href="">Item2</a></li>_x000D_
<li><a href="">Item3</a></li>_x000D_
</ul>
_x000D_
Try experimenting with something like this also:
HTML
<ul class="inlineList">
<li>She</li>
<li>Needs</li>
<li>More Padding, Captain!</li>
</ul>
CSS
.inlineList {
display: flex;
flex-direction: row;
/* Below sets up your display method: flex-start|flex-end|space-between|space-around */
justify-content: flex-start;
/* Below removes bullets and cleans white-space */
list-style: none;
padding: 0;
/* Bonus: forces no word-wrap */
white-space: nowrap;
}
/* Here, I got you started.
li {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
}
*/
I made a codepen to illustrate: http://codepen.io/agm1984/pen/mOxaEM
Source: Stackoverflow.com