html - 处理内联 ul 时如何填充剩余空间？

Question

我使用这个 CSS 使我的 UL 看起来很漂亮

ul, li
{
  padding: 0px;
  margin-left: 0px;
  margin-bottom: 0px;
  display: inline;
}

li
{
  border: solid 1px #333333;
  margin-right: 5px;
  padding: 2px;
  background-color: #222222;
  color: #999999;
}

我想要一个具有相同图形样式的最终空列表项来填充行内的剩余空间。有点像

[item A] [item B] [item C] [-----大空一个---------]

是否可以计算出您还剩多少空间？您能否将其中一个列表项的宽度设置为 100% 或其他？

谢谢，

Answer 1

您可以在 UL 上使用背景颜色/图像，并使 UL 和 LI 的高度相同以产生这种效果