Make lis take the width of their contents, center them, but keep them on separate lines

Is there anyway to make the width of a<li> element relative to the text within it, while still having each <开发者_开发技巧;li> centred and one to a line. I want the styling to work just like the image (in the link below)

*please note the Items are centred within a surrounding box.

*also note the width of the button is relative to the size of the text.

You can do it fairly easily if you add a span to the lis.

<ul>
    <li><span>Longer Item</span></li>
    <li><span>Item 1000000000000</span></li>
    <li><span>Short</span></li>
</ul>

CSS

ul{
    text-align:center;
    width:400px;
    border:1px solid black;
}

li{
    display:block;
}

li span{
    padding:1em;
    background:red;
    color:white;
    margin:1em auto;
    display:inline-block;
}

Example: http://jsfiddle.net/jasongennaro/tDBbA/2/