How can I prevent a gap that appears between menu items?
There is a gap that appears when I try to make menu using the following code on Firefox 3.6 Its works fine in IE 8. Can some one please suggest a workaround?
<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><开发者_JAVA技巧/li>
<li><span>Help</span></li>
</ul>
</body>
</html>
with the following CSS
li
{
display:inline;
border-style:solid;
border-width:1px;
border-collapse:collapse;
padding: 0;
margin: 0px 0px 0px 0px;
}
You're displaying them inline, and you probably have whitespace between the elements, which gets condensed to a single space in the rendered HTML.
Use display: block; float: left; instead of display: inline;.
加载中,请稍侯......
精彩评论