我需要创建垂直元素列表或垂直菜单,其宽度设置为最长元素的宽度。
这是基于 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 来实现同样的事情。
最佳答案
您正在创建一个列表,因此应该使用列表项。 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>
关于html - 单元格之间具有自动宽度和边距的 CSS 垂直列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29696740/