Question

我正在设计一个网站，我正在开发一个简单的导航栏。 “家，画廊，关于我们等......”

无论如何，当我开始对导航栏进行编码时，如果假设没有间隙并且从头到尾连接，那么链接“家，画廊，关于我们等等......”之间存在间隙。 所以我的问题是为什么会发生这种情况？它假设看起来像这样：

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

相反，我得到：

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

这是我在展示真实页面时所能做的最好的事情，所以希望这些例子足够了。我已经尝试了所有的东西，所有按钮都是128 x 58像素，我尝试设置表格宽度＆amp;高度也有很多不同的方式，我只是不知道为什么我会得到这些差距。 我可能做错了什么？只是为了让事情变得更清晰，更容易理解，这是指向导航栏的链接。 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/

Answer 2

使用您在上述评论（krat0s.x10.mx）中发布的链接，因为您没有将cellpadding和cellspacing设置为0

对于包含导航栏的表格，将开始表格标记更改为此

<table width="55%" height="58" cellspacing="0" cellpadding="0">

这是快速解决方案，但我可能建议您不要使用表格进行布局，除非您要显示表格数据，因为这是不好的做法，如果大多数网页设计师不满意，请查看使用divisons <div>并列出：

<ul>
    </li></li>
<ul>

与Samich所建议的类似，可能需要更多时间来学习如何以这种方式编码，但这是一种更好的方法。

您的一些链接

W3 schools - 将教你大部分不同的标签及其用途以及一些基本教程。

Tizag - 我更多地使用它来练习PHP，但是他们有一些HTML教程。

抱歉，我无法真正提供更多链接，因为我学习HTML和CSS的方式主要来自随机教程和追踪和错误，这是很多年前的事了。对于无表格布局，您需要查看CSS属性：float clear和position等内容。快速google search会提供一些你可以尝试的教程！

祝你好运！：）

Answer 3

我只是尝试将cellspacing="0"和cellapdding="0"添加到您的表格标记中。这应该是技巧

 <table width="55%" height="58" cellspacing="0" cellpadding="0">

HTH

Answer 4

试试这个：

table {
    border-collapse: collapse;
    border-spacing: 0;
}

如果它不起作用，则可能是<td>的填充：

然后做：

td {
    padding: 0;
}

如果它没有解决问题，那么应用所有这些：

table, td {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
}

建议 Rawb92 ，避免使用表格进行布局。在您的情况下，列表在导航中更具语义正确标记。

网站模板无法正确组合在一起

4 个答案: