align li tags with an auto width vs hard coding
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][1]


  [1]: http://jsfiddle.net/spnz/XmcGh/
align li tags with an auto width vs hard coding
===

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][1]


  [1]: http://jsfiddle.net/spnz/XmcGh/