html - 让 ul 列表看起来更好，无论 li 的身高如何

Question

这是一个简单的 html + css 代码： https ://jsfiddle.net/bxn72cyk/

这里的问题是，如果一个元素的高度与其他元素的高度不同，那么 ul 列表看起来并不好。无论使用 css 的每个高度如何，如何修复此列表？

ul {
  list-style: none;
}

li {
  border: 1px solid red;
  float: left;
  padding: 10px;
  line-height: 20px;
  width: 30%;
}

.different {
  height: 19px;
  background-color: green;
}

<ul>
  <li>a</li>
  <li>d</li>
  <li class="different">smaller height</li>
  <li>set it from the left</li>
  <li>d</li>
  <li>d</li>
  <li>d</li>
  <li>d</li>
  <li>d</li>
</ul>

PS 设置 li {min-height: 20px} 是可能的解决方案之一，但它不适用。还有其他选择吗？它不适用，因为在某些情况下，每个按钮的实际大小甚至可能小于 20px。

标签： htmlcsshtml-lists