align li tags with an auto width vs hard coding
- by Diver Dan
I am having trouble trying to get a group of li tags to align how I want.
I have some basic html
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>?
and some css
.menu
{
border:solid 2px red;
width:520px;
}
ul
{
border:solid 1px #e5e5e5;
height:40px;
margin:0 auto;
list-style:none;
width:500px;
}
li{
text-align:center;
display:inline;
margin:10px;
}
I dont want to hard code li widths for each of the elements but I would like for the li elements to take up all available space with the ul element.
What do I need to change to get the result I am looking for?
My attempt on jsfiddle
