为什么这个内联LI元素向上移动？

Question

在this page，我有以下内容：

＆＃13;

＆＃13;

<div id="page">

  <ul id="selector">
    <li id="job" class="active"><a href="#">I want to find a job</a></li>
    <li><a href="#">I need help at work</a></li>
    <li><a href="#">NDIS</a></li>
    <li><a href="#">I need training</a></li>
    <li><a href="#">I've been injured at work</a></li>
    <li><a href="#">I want to refer</a></li>
    <li><a href="#">Psych service</a></li>
    <li><a href="#">I'm an employer</a></li>
  </ul>

</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

然而，第五个LI，＆＃34;我在工作中受伤了＃34;向上移动。

我无法理解为什么会这样，或者如何解决这个问题。

帮助表示赞赏。

Answer 1

在此处更改：

#selector li {
  width: 11.625%;
  margin-right: 0.5%;
  margin-top: 1%;
  background-color: #012F60;
  height: 70px;
  display: inline-table;
  vertical-align: top; // Key line
}