讓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/