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

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>

该项目的问题是 “系统和网络管理” 跨越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>