网站模板没有正确组合在一起答案

【问题标题】：Website template is not fitting together correctly网站模板没有正确组合在一起
【发布时间】：2011-12-20 09:41:09
【问题描述】：

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

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

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

相反，我得到：

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

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

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

【问题讨论】：

代码在哪里？我们是否应该发布猜测问题可能是什么，以便您可以告诉我们“这与我正在尝试做的完全不同”？
是的，我可以，因为这与我想要做的完全不同，而且我怀疑你甚至不知道从哪里开始

标签： html css templates web

【解决方案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/

【讨论】：

这和我想做的完全不一样
如果您阅读您的 questino，您需要使用按钮构建导航栏，并且按钮之间没有任何间隙。这就是我在示例中所做的。如果我错了，请澄清。
这里会更容易理解，这就是我正在做的事情。 krat0s.x10.mx
所以？您需要将我写的内容与您的背景一起放入 div。 jsfiddle.net/DrUhA/2。但它没有图像，可能需要一些调整

【解决方案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 带来了一堆你可以尝试的教程！

祝你好运！ :)

【讨论】：

非常感谢，我会听取您的建议，您完美地解决了我的问题。
@nastyn8 嗨，我真的不能提出任何建议，因为我自己没有使用任何东西，不过我已经用几个链接更新了我的答案，祝你好运:)

【解决方案3】：

我会尝试将cellspacing="0" 和cellapdding="0" 添加到您的表格标签中。这应该是诀窍

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

第

【讨论】：

【解决方案4】：

试试这个：

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

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

然后做：

td {
    padding: 0;
}

如果不能解决问题，则全部应用：

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

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

【讨论】：