html - 使列表中的按钮与列表元素具有相同的高度

Question

我正在测试一个由列表项组成的简单布局，我想在其中将最后一个 li 设置为一个按钮，并且高度与之前的列表项相同。

这是一个简单的代码

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li> <!--This one should be a button-->
</ul>

这里是 FIDDLE

除非绝对必要，否则我尽量避免使用脚本。

Answer 1

您不想为列表项使用固定高度吗？如果您不这样做，并且不想使用脚本，那么请不要理会:

在最后一个 li 中添加一个段落元素，其中包含与前面的列表项相同的副本。将该段落的不透明度设置为 0。将按钮绝对定位在 li 元素中，并使用变换技巧将其居中:

button {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%);
}

有点乱，但除了使用固定高度或使用脚本之外，我想不出其他方法。