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

【问题标题】：Make lis take the width of their contents, center them, but keep them on separate lines使 lis 取其内容的宽度，将它们居中，但将它们保持在不同的行上
【发布时间】：2011-11-21 13:50:30
【问题描述】：

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

*请注意项目在周围的框中居中。

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

【问题讨论】：

标签： html css layout html-lists centering

【解决方案1】：

如果您将span 添加到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;
}

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

【讨论】：