空跨越移动其他跨度

Question

  <span style="float:left; padding-right: 5px;">
    <span style="display:block;">Harvard</span>
    <span>John Smith</span>
  </span>

  <span style="float:left; padding-right: 5px;">
    <span style="display:block;">Chicago</span>
    <span>Tucker Max</span>
  </span>

  <span style="float:left; padding-right: 5px;">
    <span style="display:block;"></span>
    <span>Rihanna</span>
  </span>

  <span style="float:left; padding-right: 5px;">
    <span style="display:block;">NYU</span>
    <span>Peter Simpson</span>
  </span>
 //... and many more

第一个范围包含大学，第二个范围包含人员的姓名。现在我的问题是，每当我有一个没有去大学的人时，我只想把它留空。

但是当我这样做时，这个人的名字就会向上移动而不再与其他名字对齐。所以在我的例子中，蕾哈娜向上移动：

我可以写一些类似-或no uni的东西，但我更喜欢在那里有一个空白字段，因为它更整洁。我也更喜欢基于CSS的解决方案。

编辑：如果有人投票，请至少告诉我原因。

Answer 1

<span style="float:left; padding-right: 5px;">
  <span style="visibility:hidden;">&nbsp</span><!-- Change is in this line -->
  <span>Rihanna</span>
</span>

您可以使用“visibility：hidden”样式。这样，在隐藏元素时仍将使用跨度的高度/宽度。