使lis取其内容的宽度，使它们居中，但将它们放在不同的行上

Question

无论如何都要使<li>元素的宽度相对于其中的文本，同时仍然让每个<li>居中，一个到一行。我希望样式像图像一样工作（在下面的链接中）

*请注意，物品位于周围的盒子中心。

*还要注意按钮的宽度是相对于文本的大小。

Answer 1

如果您向span添加li，则可以相当轻松地完成此操作。

<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;
}

示例：http://jsfiddle.net/jasongennaro/tDBbA/2/