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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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;
}

1
2
3
.fr ul li {
    float: left; 
}