html - 单元格之间具有自动宽度和边距的 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 属性，因此是否可以使用 divs 或 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>