网站模板不能正确安装在一起

我正在设计一个网站，我正在研究一个简单的导航栏。 “家，画廊，关于我们等......”网站模板不能正确安装在一起

无论如何，当我开始编码导航栏时，在“家，画廊，关于我们等......”的链接之间存在差距假设没有空白，并始终连接。 所以我的问题是为什么会发生这种情况？它的假设看起来像这样：

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

，而不是我得到：

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

这就是我可以不展示真实的页面做的最好的，所以希望这些例子就够了。我尝试了所有的东西，所有的按钮都是128 x 58像素，我试图设置表格宽度&高度很多不同的方式，我也不知道为什么我会得到这些差距。 我能做什么错？只是为了让事情更清晰易懂，这里是我的导航栏的链接。 http://krat0s.x10.mx/

这里是代码： http://pastebin.com/4Dsv0ish

来源

2011-12-20 nastyn8

一些html？一些CSS？ – Samich 2011-12-20 09:42:35

代码在哪里？我们是否应该发布*猜测问题可能是什么，所以你可以告诉我们*“这不像我想要做的事情”*？ – 2011-12-20 09:53:27

是的，我可以，因为它不是我想要做的事情，除此之外，我怀疑你甚至不知道从哪里开始 – nastyn8 2011-12-20 10:06:29

的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/

来源

2011-12-20 09:46:21 Samich

这完全不像我想要做的 – nastyn8 2011-12-20 09:52:41

如果你阅读你的questino，你需要带按钮的buld导航栏在按钮之间没有任何间隙。这就是我在例子中所做的。如果我错了，请澄清一下。 – Samich 2011-12-20 09:54:42

在这里，这将让它更容易站立，这是我正在工作。 http://krat0s.x10.mx/ – nastyn8 2011-12-20 09:57:48

使用你的链接，你在上面发布注释（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属性等内容：floatclear和position。快速的google search带来了一堆教程，你可以试试！

祝你好运！ :)

来源

2011-12-20 10:58:11 RobFos

非常感谢，我会采纳您的建议，并且您完美地解决了我的问题。 – nastyn8 2011-12-20 17:15:57

什么书你会建议学习HTML和CSS – nastyn8 2011-12-20 17:22:34

@ nastyn8嗨，我不能真正建议任何，因为我没有使用任何我自己，我已经更新了我的答案与几个链接虽然，祝你好运:) – RobFos 2011-12-21 09:51:40

我只想尝试将cellspacing="0"和cellapdding="0"添加到您的表格标记。这应该向伎俩

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

心连心

来源

2011-12-20 11:08:52

试试这个：

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

如果它不工作，那么很可能它的<td>的填充：

然后做：

td { 
    padding: 0; 
}

如果不解决这个问题，然后应用这些：

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

由于Rawb92建议，避免使用表格来布局。在你的情况下，列表更多语义正确标记在您的导航。

来源

2011-12-20 14:37:09

网站模板不能正确安装在一起

回答

相关问题