如何防止菜单项之间出现间隙?

时间:2011-01-15 19:21:16

标签: html css

当我尝试使用Firefox 3.6上的以下代码创建菜单时,会出现间隙 它在IE 8中运行良好。有人可以建议一个解决方法吗?

<html>
<title>Menu</title>
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
    <ul>
        <li><span>Faculty</span></li>
        <li><span>Students</span></li>
        <li><span>CCE Configuration</span></li>
        <li><span>Curriculum</span></li>
        <li><span>Prepare Reports</span></li>
        <li><span>Help</span></li>
    </ul>
</body>
</html>

使用以下CSS

li
{
display:inline;
border-style:solid;
border-width:1px;
border-collapse:collapse;
padding: 0;
margin: 0px 0px 0px 0px;
}

1 个答案:

答案 0 :(得分:3)

您正在内联显示它们,并且您可能在元素之间有空格,这些空格会压缩到呈现的HTML中的单个空格。

使用display: block; float: left;代替display: inline;