固定宽度列表项和垂直对齐问题

Question

我有 5 个水平列表项，每个都有固定的宽度和高度，其中的文本垂直和水平对齐。其中一项的文本超过一行。因此，它搞砸了与其他 4 项的对齐。谁能帮忙？这是我的 HTML/CSS 代码：

#filters li {
    display: inline-block;
    border: 2px solid #ff1c71;
    margin-right: 1%;
    height: 80px;
    cursor: pointer;
}

#filters li a {
    display: inline-block;
    width: 200px;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

<ul id="filters">
  <li class="work-active">
    <a href="javascript:void(0)" title="" data-filter=".all" class="medium pink">All</a>   </li>
  <li id="end-user-support-link">
    <a href="javascript:void(0)" title="" data-filter=".end-user-support" class="medium pink ">End User Support</a></li>
  <li id="graphic-design-link">
    <a href="javascript:void(0)" title="" data-filter=".graphic-design" class="medium pink ">Graphic Design</a></li>
  <li id="systems-and-network-administration-link">
    <a href="javascript:void(0)" title="" data-filter=".systems-and-network-administration" class="medium pink ">Systems and Network Administration</a></li>
  <li id="web-development-link">
    <a href="javascript:void(0)" title="" data-filter=".web-development" class="medium pink last">Web Development</a>
  </li>
</ul>

有问题的项目 "System and Network Administration" 跨越 2 行。

这是 UI 的样子：

提前致谢！

Answer 1

您只需将 vertical-align: top 分配给您 li 就可以了

#filters li {
    display: inline-block;
    border: 2px solid #ff1c71;
    margin-right: 1%;
    height: 80px;
    cursor: pointer;
    vertical-align: top; /* ---- this line aligns all the `li` to top vertically --*/
}

#filters li a {
    display: inline-block;
    width: 200px;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

<ul id="filters">
  <li class="work-active">
    <a href="javascript:void(0)" title="" data-filter=".all" class="medium pink">All</a>   </li>
  <li id="end-user-support-link">
    <a href="javascript:void(0)" title="" data-filter=".end-user-support" class="medium pink ">End User Support</a></li>
  <li id="graphic-design-link">
    <a href="javascript:void(0)" title="" data-filter=".graphic-design" class="medium pink ">Graphic Design</a></li>
  <li id="systems-and-network-administration-link">
    <a href="javascript:void(0)" title="" data-filter=".systems-and-network-administration" class="medium pink ">Systems and Network Administration</a></li>
  <li id="web-development-link">
    <a href="javascript:void(0)" title="" data-filter=".web-development" class="medium pink last">Web Development</a>
  </li>
</ul>

固定宽度列表项和垂直对齐问题

Fixed width list items & vertical alignment issue

html

css

wordpress

jquery

vertical-alignment