Horizontal list items

Question

So  I have attempted to create a horizontal list for use on a new website I am designing  I have attempted a number of the suggestions found online already such as setting  float  to left and such - yet none of these have worked when it comes to fixing the problem    x000D   x000D      ul menuItems   x000D        background  none  x000D        height  50px  x000D        width  100px  x000D        margin  0  x000D        padding  0  x000D        x000D      ul menuItems li   x000D        display  inline  x000D        list-style  none  x000D        margin-left  auto  x000D        margin-right  auto  x000D        top  0px  x000D        height  50px  x000D        x000D      ul menuItems li a   x000D        font-family  Arial  Helvetica  sans-serif  x000D        text-decoration  none  x000D        font-weight  bolder  x000D        color   000  x000D        height  50px  x000D        width  auto  x000D        display  block  x000D        text-align  center  x000D        line-height  50px  x000D        x000D   lt ul id  menuItems  gt  x000D     lt li gt  x000D       lt a href  index php  gt Home lt  a gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt a href  index php  gt DJ Profiles lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Currently I am unsure of what is causing this issue  how would I go about and resolve it

User · Answer

Here you can find a working example  with some more suggestions about dynamic resizing of the list   I ve used display inline-block and a percentage padding so that the parent list can dynamically change size   display inline-block  padding 10px 1   width  30    plus two more rules to remove padding for the first and last items   ul menuItems li first-child padding-left 0   ul menuItems li last-child padding-right 0

User · Answer

I guess the simple solution i found is below ul      display flex

User · Answer

Updated Answer  I ve noticed a lot of people are using this answer so I decided to update it a little bit  If you want to see the original answer  check below  The new answer demonstrates how you can add some style to your list    x000D   x000D  ul  gt  li   x000D      display  inline-block  x000D         You can also add some margins here to make it look prettier    x000D      zoom 1  x000D       display inline  x000D         this fix is needed for IE7-    x000D    x000D   lt ul gt  x000D       lt li gt   lt a href     gt some item lt  a gt  x000D   x000D       lt  li gt  x000D       lt li gt   lt a href     gt another item lt  a gt  x000D   x000D       lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

A much better way is to use inline-block  because you don t need to use clear both at the end of your list anymore   Try this    lt ul gt       lt li gt           lt a href     gt some item lt  a gt       lt  li gt       lt li gt           lt a href     gt another item lt  a gt       lt  li gt   lt  ul gt    CSS   ul  gt  li      display inline-block      Have a look at it here   http   jsfiddle net shahverdy 4N6Ap

User · Answer

You could also use inline blocks to avoid floating elements   lt ul gt       lt li gt           lt a href     gt some item lt  a gt       lt  li gt       lt li gt           lt a href     gt another item lt  a gt      lt  li gt   lt  ul gt    and then style as   li         with fix for IE        display inline      display inline-block      zoom 1             additional styles to make it look nice             that way you wont need to float anything  eliminating the need for clearfixes

User · Answer

This fiddle shows how  http   jsfiddle net 9th7X   ul  li       display inline     Great references on lists and css here   http   alistapart com article taminglists

[html] Horizontal list items

Examples related to html

Examples related to css