具有自動寬度和單元格間距的CSS垂直列表

Question

我需要創建垂直寬度列表項目或垂直菜單，寬度設置爲最長項目的寬度。 這裏是table基於https://jsfiddle.net/fj8z6r33/版本：

HTML：

<table cellspacing="2"> 
    <tr><td>item 1</td></tr> 
    <tr><td>item 2</td></tr> 
    <tr><td>long item 3</td></tr> 
    <tr><td>very very long item 4</td></tr> 
</table> 

CSS：基於表

td { 
    background: lightgreen; 
} 

但解決方案，從剛性的某種程度的遭受並且需要使用過時的cellspacing屬性，因此有可能使用div或ul/li來製作相同的東西。

Answer 1

你正在創建一個列表，所以應該使用列表項。 https://jsfiddle.net/fj8z6r33/1/

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 
li { 
 
    background: lightgreen; 
 
    padding: 6px 18px; 
 
    margin-bottom: 2px; 
 
}

<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>long item 3</li> 
 
    <li>very very long item 4</li> 
 
</ul>