Twitter引导html选择内部分页组件偏移且未对齐

当我尝试在分页组件内部使用html选择时，html选择是偏移的，并且没有正确对齐。为了简洁起见，我只在页面的前半部分加入了html select。它应该说明问题，您可以查看

展示
1.
2.
3.
4.
5.

任何帮助都将不胜感激

尝试以下CSS：

.pagination select {
  height: 30px;
  margin-top: -7px;
  margin-bottom: -5px;
}

或者，或者：

.pagination select {
  height: 2em;
  margin-top: -0.5em;
  margin-bottom: -0.4em;
}

尝试以下CSS：

.pagination select {
  height: 30px;
  margin-top: -7px;
  margin-bottom: -5px;
}

或者，或者：

.pagination select {
  height: 2em;
  margin-top: -0.5em;
  margin-bottom: -0.4em;
}

---

如果你没有标签也能做到这一点，下面是我最后使用的CSS

CSS

HTML

1.
2.
3.

---

示例：

如果您可以在没有标签的情况下完成，下面是我最终使用的CSS

CSS

HTML

1.
2.
3.

---

示例：

两种方法都有效！令人惊叹的！我完全忘了我可以在CSS中使用负值！非常感谢你！两个都成功了！令人惊叹的！我完全忘了我可以在CSS中使用负值！非常感谢你！您的示例与您发布的示例不同，再加上替换它并没有起作用。；）您的示例与您发布的示例不同，再加上替换它并没有起作用。；）

<div class="container"><nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><select onchange="if (this.value) window.location.href=this.value">
      <option value="?page=1">1</option>
      <option value="?page=2">2</option>
      <option value="?page=3">3</option>
      </select></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>
</div>