Stretch horizontal ul to fit width of div

Question

For the main nav of my site  there is a 980px wide div with a ul for the main nav links   I am trying to make the nav links stretch to fit the width of the div evenly    lt div style  width  980px   gt   lt ul id  horizontal-style  gt     lt li gt  lt a href     gt Nav Item lt  a gt  lt  li gt     lt li gt  lt a href     gt Short Item lt  a gt  lt  li gt     lt li gt  lt a href     gt Really Long Nav Item lt  a gt  lt  li gt     lt li gt  lt a href     gt Nav Link lt  a gt  lt  li gt     lt li gt  lt a href     gt Another Link lt  a gt  lt  li gt   lt  ul gt   lt  div gt    I am doing some typical css to make the ul list horizontally  float  left  display  block   I can tweak the padding of the li to get it very close  but what I really need is a way to make it stretch to fit automatically   Possible   Edit Difficulty 1  Can t use tables   Difficulty 2  Each nav item will be a different width to accommodate longer and shorter link names

User · Answer

People hate on tables for non-tabular data  but what you re asking for is exactly what tables are good at   lt table width  100   gt

User · Answer

inelegant  but effective  way  use percentages   horizontal-style       width  100      li       width  20       This only works with the 5  lt li gt  example  For more or less  modify your percentage accordingly  If you have other  lt li gt s on your page  you can always assign these particular ones a class of  menu-li  so that only they are affected

User · Answer

This is the easiest way to do it  http   jsfiddle net thirtydot jwJBd      or with table-layout  fixed for even width distribution  http   jsfiddle net thirtydot jwJBd 59    This won t work in IE7    horizontal-style       display  table      width  100         table-layout  fixed       horizontal-style li       display  table-cell     horizontal-style a       display  block      border  1px solid red      text-align  center      margin  0 5px      background   999      Old answer before your edit  http   jsfiddle net thirtydot DsqWr

User · Answer

I Hope that this helps you out    Because I tried all the answers but nothing worked perfectly  So  I had to come up with a solution on my own   horizontal-style     padding-inline-start  0  important     Just in case if you find that there is an extra padding at the start of the line    justify-content  space-around    display  flex      horizontal-style a       text-align  center      color  white      text-decoration  none

[css] Stretch horizontal ul to fit width of div

Examples related to css

Examples related to layout

Examples related to html

Examples related to html-lists