Question

当我尝试使用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;
}

Answer 1

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

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

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

1 个答案: