＜li＞标签 —— 转换为行内块后，横向列表无法对齐

如题：在给<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; 
}

效果图如下：

最后

以上就是孤独硬币为你收集整理的＜li＞标签 —— 转换为行内块后，横向列表无法对齐的全部内容，希望文章能够帮你解决＜li＞标签 —— 转换为行内块后，横向列表无法对齐所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。