我有 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 行。
用户界面如下所示:
提前谢谢您!
最佳答案
您只需将 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>
关于jquery - 修复了宽度列表项和垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35617765/