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

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