按列表矩形对齐列表项

Question

我有一个使用display: inline-flex的列表。列表中不同项目的字体大小不同。我发现列表项根据文本底部的位置对齐。这使得文本较小的项目显得低于其他项目。

但是，我想根据其边界值对齐项目。

我已经找到了解决这个问题的黑客攻击：我在我想要显示的文本的两侧放置一个包含点的跨度，我将此点的font-size设置为最大字体大小的大小列表，我将这些跨度的visibility设置为hidden。

是否有非hacky，纯CSS方式来实现这一目标？

JSFiddle

body {
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  display: inline-flex;
  border: 1px solid #000;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  font-size: 64px;
  line-height: 64px;
}

li:last-child {
  font-size: 16px;
}

span {
  font-size: 64px;
  visibility: hidden;
}

hr {
  position: absolute;
  top: 47px;
  width: 204px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>THREE</li>
</ul>

<hr>

<ul>
  <li>1</li>
  <li>2</li>
  <li><span>.</span>THREE<span>.</span></li>
</ul>

Answer 1

您可以通过向容器添加display: flex来实现所需的对齐方式，在本例中为ul元素。

fiddle

＆＃13;

＆＃13;

body {
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  display: inline-flex;
  border: 1px solid #000;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  font-size: 64px;
  line-height: 64px;
}

li:last-child {
  font-size: 16px;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>THREE</li>
</ul>

＆＃13;

＆＃13;

＆＃13;