[css] How to style the UL list to a single line

I want to render this list in a single line.

  • List item1
  • List item2

Should be shown as

*List item2 *List item2

What CSS style to use?

This question is related to css

The answer is

HTML code:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>

CSS code:

ul.list li{
  width: auto;
  float: left;

Try experimenting with something like this also:


 <ul class="inlineList">
   <li>More Padding, Captain!</li>


 .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

in bootstrap use .list-inline css class

<ul class="list-inline">

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)

  display:flex;  _x000D_
  <li><a href="">Item1</a></li>_x000D_
  <li><a href="">Item2</a></li>_x000D_
  <li><a href="">Item3</a></li>_x000D_