如题:在给<li>标签 display:inline-block; 转换为行内块元素后,横向列表无法对其
如下:此处共用了7个li标签,其中2、4、6号<li>通过css样式使其呈现出分隔竖线的效果
HTML代码如下:
<div class="fr">
<ul>
<li>登录</li>
<!-- 下方的li作为分割小竖线 -->
<li></li>
<li>注册</li>
<li></li>
<li>网站无障碍</li>
<li></li>
<li>微信公众号</li>
</ul>
</div>
----------------------------------------------------
整体的<li>标签的CSS样式如下:
.fr ul li {
display: inline-block;
/* float: left; */
vertical-align: top;
}
---------------------------------------------------
偶数序号<li>标签的CSS样式如下:
.fr ul li:nth-child(2n) {
width: 1px;
height: 16px;
background-color: #666;
margin: 9px 5px;
}
产生原因如下:
由于display:inline-block 的属性中,存在用作分隔线的、本身没有内容的<li>行内块元素,整体的基线对齐方式就是基于这些这些分隔线<li>的底边。
解决方法:
法一:
给 .fr ul li:nth-child(2n) 或者 .fr ul li 样式增加一句 vertical-align: top; 即可实现所有行内块元素水平对齐。
法二:
将 .fr ul li 样式修改为左浮动,而非行内块
.fr ul li {
float: left;
}
效果图如下: