html - Horizontally aligning a list with 6 items? -


I can not figure out how to align 6 item items (with the difference) horizontally on the site alike. The page width is 1000px, this is what I have ... 

  & lt; Ul id = 'mp_locations' & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Style & gt; #mp_locations {Explicit: Both; List-style: none; Padding: 0; Margin: 0; Width: 1000 pixels; } #mp_locations li {float: left; Width: 180px; List-style: none; Height: 100px; -max-boundary-radius: 5px; -WebKit-boundary-radius: 5px; Boundary-radius: 5px; Background color: # F5F5F5; Padding: 0; Margin: 0; Margin-left: 10px; Width: 15%; } #mp_locations li: First-child {margin-left: 0; } & Lt; / Style & gt;   
 The issue of this is that 15% is very small but 16% is too big because you can not do decades (from my best knowledge), so I have it in a fixed amount So basically, how can I find 6 boxes to line evenly across the page? Any help is appreciated, thanks.  
  
 
 
 now define with  with   id   #mp_locations li   15.83%   
  #mp_locations li {width: 15.83%; }   
  live demo

Comments

Post a Comment