将无序列表与不同数量的列表项对齐
发布于2021-10-23 09:33 阅读(794) 评论(0) 点赞(18) 收藏(4)
我正在尝试制作 4 个带有项目的列表，但是我在尝试对齐它们时遇到了问题，因为我拥有的四个列表的项目数量各不相同。
当我尝试在 ul 的类上使用 inline-block 时，这就是结果。
如果我将列表设置为相同的大小，就会发生这种情况。
这是我的 HTML：
<body>
<img src = "sample-img.png" class="center"/>
<div class= "externalMenu">
<ul class="exSection">
<li> <a href= "#">Packaging </li>
<li> <a href= "#">Packaging Org Chart </li>
</ul>
<ul class="exSection">
<li> <a href= "#">FAQs </li>
<li> <a href= "#">KB Articles </li>
<li> <a href= "#">Customer Survey </li>
<li> <a href= "#">EUCD Dashboard </li>
<li> <a href= "#">RSM Dashboard </li>
</ul>
<ul class="exSection">
<li> <a href= "#">SPT Maintenance Calendar </li>
</ul>
<ul class="exSection">
<li> <a href= "#">myEars </li>
<li> <a href= "#">SLM </li>
<li> <a href= "#">RSM </li>
<li> <a href= "#">Remedy </li>
<li> <a href= "#">Export </li>
</ul>
</div>
</body>
虽然这是我的 CSS：
*{
margin: 0;
padding: 0;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
.externalMenu{
width:100%;
}
.exSection{
background-color:yellow;
list-style-type:none;
display:inline-block;
border: 1px solid #000;
width: 200px;
height: 150px;
}
解决方案
添加vertical-align: top;到您的 .exSection：
.exSection{
background-color:yellow;
list-style-type:none;
display:inline-block;
border: 1px solid #000;
width: 200px;
height: 150px;
vertical-align: top;
}
你不需要height: 150px;- 除非你想明确设置它。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/208868/f9eb032e2a5099793a73/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力