How to make a ul display in a horizontal row

Question

How can I make my list items appear horizontally in a row using CSS    x000D   x000D   div top hypers   x000D      background-color  eeeeee  x000D      display inline        x000D    x000D   ul top hypers   x000D      display  inline  x000D    x000D   lt div id  div top hypers  gt  x000D       lt ul id  ul top hypers  gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Inbox lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Compose lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Reports lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Preferences lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  logout lt  a gt  lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

As  alex said  you could float it right  but if you wanted to keep the markup the same  float it to the left    ul top hypers li       float  left

User · Answer

List items are normally block elements  Turn them into inline elements via the display property   In the code you gave  you need to use a context selector to make the display  inline property apply to the list items  instead of the list itself  applying display  inline to the overall list will have no effect     ul top hypers li       display  inline      Here is the working example    x000D   x000D   div top hypers   x000D      background-color  eeeeee  x000D      display inline        x000D    x000D   ul top hypers li  x000D      display  inline  x000D    x000D   lt div id  div top hypers  gt  x000D       lt ul id  ul top hypers  gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Inbox lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Compose lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Reports lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Preferences lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  logout lt  a gt  lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

It will work for you    ul top hypers li       display  inline-block

User · Answer

As others have mentioned  you can set the li to display inline   or float the li left or right   Additionally  you can also use display flex  on the ul   In the snippet below I also added justify-content space-around to give it more spacing   For more information on flexbox  checkout this complete guide    x000D   x000D   div top hypers   x000D      background-color  eeeeee  x000D      display inline        x000D    x000D   ul top hypers   x000D      display  flex  x000D      justify-content space-around  x000D      list-style-type none  x000D    x000D   lt div id  div top hypers  gt  x000D       lt ul id  ul top hypers  gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Inbox lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Compose lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Reports lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  Preferences lt  a gt  lt  li gt  x000D           lt li gt  amp  8227   lt a href    class  a top hypers  gt  logout lt  a gt  lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

ul top hypers li     display  flex

User · Answer

You could also set them to float to the right    ul top hypers li       float  right      This allows them to still be block level  but will appear on the same line

User · Answer

Set the display property to inline for the list you want this to apply to   There s a good explanation of displaying lists on A List Apart

[html] How to make a <ul> display in a horizontal row

Examples related to html

Examples related to css

Examples related to html-lists