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

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

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

User · Answer

In modern browsers you can do the following  CSS3 compliant    x000D   x000D  ul x000D    x000D    display flex    x000D    list-style none  x000D    x000D   lt ul gt  x000D     lt li gt  lt a href    gt Item1 lt  a gt  lt  li gt  x000D     lt li gt  lt a href    gt Item2 lt  a gt  lt  li gt  x000D     lt li gt  lt a href    gt Item3 lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

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

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

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

Examples related to css