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