html - Horizontally aligning a list with 6 items?

Question

I can't seem to figure out how to get 6 list items (with spacing) to horizontally align evenly across the site. The width of the page is 1000px, this is what I have...

<ul id='mp_locations'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
#mp_locations {
clear:both;
list-style:none;
padding:0;
margin:0;
width: 1000px;
}
#mp_locations li {
float:left;
width:180px;
list-style:none;
height:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
padding:0;
margin:0;
margin-left:10px;
width:15%;
}
#mp_locations li:first-child {
margin-left:0;
}
</style>

The issue with this is that 15% is too small but 16% is too big. Since you can't do decimals (to the best of my knowledge) I can't set it to a set amount. So basically, how can I get 6 boxes to line up evenly across the page?

Answer 1

Hey now define with of your id #mp_locations li 15.83%

#mp_locations li {
width:15.83%;
}

live demo http://tinkerbin.com/kzx7nX9s

Answer 2

you can do decimals :) http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html

Answer 3

there are two width rules in #mp_locations li you could change it to

#mp_locations li {
float:left;
width:156px;
list-style:none;
....
margin:0;
margin-left:10px;

And I advice you to change the margin too: margin: 0px 5px;

Answer 4

dont repeat same style attribute un necessarily. you can get the desired output just by changing margin-left see below:

css

#mp_locations {
clear:left;
list-style-type:none;
padding:0;
margin:0;
width: 1000px;
background-color:red;
overflow:hidden;
}
#mp_locations li {
float:left;
height:100px;
border-radius:5px;
background-color: #F5F5F5;
margin-left:8px;
width:16%;
display:inline;
}
#mp_locations li:first-child {
margin-left:0;
}

html

<ul id='mp_locations'>
<li>d</li>
<li>f</li>
<li>d</li>
<li>ff</li>
<li>fff</li>
<li>ddfdfdfd</li>
</ul>

Working DEMO