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

来源：互联网发布：重力感应效果 js 编辑：程序博客网时间：2024/05/04 23:52

HTML代码块：

<!-- 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代码块：

#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：

<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是最后考虑的一种方式。

0 0