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/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;