How to style the UL list to a single line

Question

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

User · Answer

In modern browsers you can do the following (CSS3 compliant)

_x000D_

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_

User · Answer

HTML code    lt ul class  list  gt     lt li gt Item 1 lt  li gt     lt li gt Item 2 lt  li gt     lt li gt Item 3 lt  li gt   lt  ul gt    CSS code   ul list li    width  auto    float  left

User · Answer

Try experimenting with something like this also      HTML     lt ul class  inlineList  gt      lt li gt She lt  li gt      lt li gt Needs lt  li gt      lt li gt More Padding  Captain  lt  li gt    lt  ul gt       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

User · Answer

ul li    display  inline      For more see the basic list options  and a basic horizontal list at listamatic    thanks to Daniel Straight below for the links    Also  as pointed out in the comments  you probably want styling on the ul and whatever elements go inside the li s and the li s themselves to get things to look nice

User · Answer

in bootstrap use  list-inline css class   lt ul class  list-inline  gt       lt li gt Coffee lt  li gt       lt li gt Tea lt  li gt       lt li gt Milk lt  li gt   lt  ul gt    Ref  https   www w3schools com bootstrap tryit asp filename trybs ref txt list-inline amp stacked h

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

Examples related to css