在过去的几个小时里，我一直在尝试对这个水平导航进行排序，但没有任何效果。我试过 reset.css 样式表，*{padding: 0; margin: 0) 等等，而我的图片链接之间仍然有间隙。
您看，导航是由内联显示的图像链接的无序列表组成的，但是每个图像之间存在间隙，左、右、顶部和底部，我不明白为什么。在所有浏览器中都是一样的。
这是页面的链接，来源：Beansheaf Temporary
css链接：http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/fund2.css
网站的其余部分显然还没有完成，只是我现在担心的导航。
【问题讨论】：
尝试删除li 元素之间的所有空格和换行符。
因为您是内联显示它们，所以 HTML 中的空格将就像它们是内联文本中的空格一样，并导致在呈现时留下间隙。
【讨论】：
添加
#mainNav li {
float:left;
}
到您的 CSS。
【讨论】：
这是因为 HTML 文档中的新行将被解释为打印内容中的空格。由于您所有的 'li' 元素都在新行上，因此在每个元素之间添加了一个空格。确保将它们显示为块元素并将它们浮动到左侧，以便它们均匀地一起运行。
【讨论】：
您可以浮动列表元素，然后空格不会干扰：
#mainNav li
{
float: left;
list-style-type: none;
}
【讨论】：
为避免浮动导航 lis，您有 - 至少 - 两个选项来删除内联元素之间的空格。
<ul>
<li><a href="#"><img src="../hotel.jpg" /></a></li
><li><a href="#"><img src="../foodDrink.jpg" /></a></li
><li><a href="#"><img src="../meetingsConferences.jpg" /></a></li>
</ul>
请注意，结束</li> 标记在后续行中关闭（最后一行除外），这是有效的并保持可读性（至少对我而言）。
另一个选项有点混乱
<ul>
<li><a href="#"><img src="../hotel.jpg" /></a></li><!--
--><li><a href="#"><img src="../foodDrink.jpg" /></a></li><!--
--><li><a href="#"><img src="../meetingsConferences.jpg" /></a></li>
</ul>
并且只需使用 html cmets <!-- ... --> 注释掉原本会折叠成单个空格的空格。
我确实希望有某种方式来指定（例如）：
ul li img {whitespace: none-between; }
【讨论】：
另一种避免浮动的方法是将容器上的字体大小设置为 0，然后为 LI 重新设置它，如下所示：
#mainNav
{ font-size: 0}
#mainNav li
{
display: inline;
list-style-type: none;
font-size: 1em
}
【讨论】：
我使用 li 标签上的 line-height 属性来解决这个问题。
ul li { line-height:0; }
【讨论】：
图片链接下方的空白是由于图片默认与基本文本行对齐，您可以简单地声明解决它
li img {
vertical-align:bottom;
}
魔法！
【讨论】：
这个问题的最佳解决方案来自http://www.cssplay.co.uk/menus/centered.html。并引用：
我们需要做的就是将 ul 标签包含在一个宽度为 100% 且溢出设置为隐藏的外部容器中。
<ul>标记随后使用相对位置设置样式，并以 50% 的左侧位置向左浮动。最后，
<li>标签也设置了相对位置样式，向左浮动，但这次的右侧位置为 50%。...正如他们所说，这就是我们所需要的。
【讨论】：
如果您使用 xslt 显示这些元素，您应该进行以下操作：
<xsl:template match=".//text()">
<xsl:value-of select="normalize-space(.)" />
</xsl:template>
【讨论】：