CSS中<li>标签横向排列出现间距问题

HTML代码块：

[objc] view
plain copy

 





<!-- header -->  

            <div class="tab-header">  

                <ul>  

                    <li><a href="#">公告</a></li>  

                    <li><a href="#">规则</a></li>  

                    <li><a href="#">论坛</a></li>  

                    <li><a href="#">安全</a></li>  

                    <li><a href="#">公益</a></li>  

                </ul>  

            </div>  

CSS代码块：

[objc] view
plain copy

 





#tabControl .tab-header ul {  

    background-color: gray;  

    width: 498px;  

    height: 30px;  

}  

  

#tabControl .tab-header li {  

    background-color: green;  

    list-style: none;  

    display: inline-block;  

  

    width: 98px;  

    height: 30px;  

    text-align: center;  

    line-height: 30px;  

    /*float: left;*/  

}  

  

#tabControl .tab-header li a {  

    text-decoration: none;  

    display: inline-block;  

    width: 98px;  

    height: 36px;  

  

    background-color: black;  

}  

显示效果：



期待效果：



错误原因：

中间出现间距的原因：<li>标签和<li>标签之间有空格引起

修改方式：

方式1：

[objc] view
plain copy

 





<div class="tab-header">  

                <ul>  

                    <li><a href="#">公告</a></li><!--   

                --><li><a href="#">规则</a></li>  

                    <li><a href="#">论坛</a></li>  

                    <li><a href="#">安全</a></li>  

                    <li><a href="#">公益</a></li>  

                </ul>  

            </div>  

第一个<li>标签和第二个<li>标签直接注释掉或者紧挨着没有空格 结果如下:



方式2：li选择器中加入 float: left; 让li变成浮动，让各个<li>标签紧挨着排列。同时还可以看到 float具有inline元素特性。

方式3：设置ul标签的属性 font-size ＝ 0，再重新设置li标签的 font-size 。

个人建议 方式2是最后考虑的一种方式。