html - Evenly spaced list items -


I have been tasked with preparing a horizontal NAV list which looks like this:

< Img src = "https://i.stack.imgur.com/hE8yO.jpg" alt = "Enter image details here">

The issue is that the objects are different from left to right Need to be separated from

Setting width is a pain because different browsers appear to interpret them differently. In addition, the number of items in this list will change based on user.

Any advice would be appreciated!

After the advice of Din, I have found myself with the below - which is very right, I am thinking that the only thing is that the left two elements are unfortunately small, . I'm hoping the customer will be happy with the text-alignment; Center with all the elements touching the padding at the center!

Enter image details here

< Div class = "post-text" itemprop = "text">

I made a JSfield of your menu ... everything is completely distant, dynamic, and it goes without javascript or weird / ugly html meaning For the left / right edges of the issues (and it should work in IE6, if this is the case.)

jpg demo

HTML: 

  & lt; Div id = "menuwrapper" & gt; & Lt; Div class = "menuitem" & gt; Career & lt; / Div & gt; & Lt; Div class = "menuitem" & gt; Trade & lt; / Div & gt; & Lt; Div class = "menuitem" & gt; Contact America & lt; / Div & gt; & Lt; Div class = "menuitem" & gt; Privacy Policy & lt; / Div & gt; & Lt; Div class = "menuitem" & gt; T & amp; CS & lt; / Div & gt; & Lt; Div class = "menuitem" & gt; SITEMAP & lt; / Div & gt; & Lt; Div class = "menuitem" & gt; Corporate & lt; / Div & gt; & Lt; Div class = "menuitem" & gt; ACCESSIBILITY & lt; / Div & gt; & Lt; Span class = "stretcher" & gt; & Lt; / Span & gt; & Lt; / Div & gt;   
  CSS:   
  #menuwrapper {height: auto; Background: # 000; Text Align: Justify; -M-Text-Support: Distribution-All-Line; Text-Support: Distribution-All-Line; }. Menuuitem {width: auto; Height: 40px; Vertical-alignment: top; Display: Inline-block; * Display: Inline; Zoom: 1 background: # 000; Color: yellow; }. Stretcher {width: 100%; Display: Inline-block; Font-size: 0; Line-height: 0; }   
 I based on the answer of the thirty-three in this thread ...

Comments

Post a Comment