html - 网站模板没有正确组合

Question

我正在设计一个网站，并且正在制作一个简单的导航栏。 “主页、画廊、关于我们等等……”

无论如何，当我开始编写导航栏代码时，链接“主页、画廊、关于我们等……”之间存在间隙，而假设它没有间隙并且从头到尾连接在一起。 所以我的问题是为什么会这样？它应该看起来像这样:

  ----------------------------------
  |home|about us|gallery|contact us|
  ----------------------------------

相反，我得到:

   -----   ----------  -------- -----------
   |home   |about us|  gallery| contact us|
   -----   ----------  -------- -----------

这是我在不显示真实页面的情况下所能做的最好的事情，所以希望这些示例足够了。我已经尝试了所有方法，所有按钮都是 128 x 58 像素，我也尝试以多种不同的方式设置表格宽度和高度，我只是不知道为什么会出现这些差距。 我哪里做错了？为了让事情更清楚、更容易理解，这里提供了指向我的导航栏的链接。 http://krat0s.x10.mx/

代码如下: http://pastebin.com/4Dsv0ish

Answer 1

HTML

<ul id="menu">
    <li>home</li>
    <li>about us</li>
    <li>gallery</li>
    <li>contact us</li>    
</ul>

CSS

#menu li { float:left; width:128px; height:58px; background:red; text-align:center; }
#menu li:hover { background:green; cursor:pointer; }

示例:http://jsfiddle.net/DrUhA/