图像链接之间的 CSS 无缘无故出现间隙

Question

在过去的几个小时里，我一直在尝试对这个水平导航进行排序，但没有任何效果。我尝试过reset.css样式表，*{padding: 0; margin: 0) 等，我的图像链接之间仍然有间隙。

您会看到，导航由内联显示的无序列表的图像链接组成，但每个图像之间（左、右、上、下）都有间隙，我不明白为什么。在所有浏览器中都是一样的。

这是该页面的链接，因此来源：Beansheaf 临时

链接到 css： < a href="http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/fund2.css" rel="noreferrer">http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/ fund2.css

网站的其余部分显然还没有完成，我现在担心的只是导航。

Answer 1

为了避免浮动导航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>

请注意，结束 标记在后续行中关闭（最后一行除外），这是有效的并保持可读性（至少对我来说）。

另一个选项稍微混乱一些

<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 注释 来注释掉原本会折叠成单个空格的空格。

我确实希望有某种方式来指定（例如）：

ul li img {whitespace: none-between; }

Answer 2

另一种避免浮动的方法是将容器上的字体大小设置为 0，然后为 LI 重新设置它，如下所示：

#mainNav
{    font-size: 0}

#mainNav li
{
    display: inline;
    list-style-type: none;
    font-size: 1em
}

Answer 3

图像链接下方的间隙是由于默认情况下图像与基本文本行对齐所致，您只需声明

li img {
    vertical-align:bottom;
}

魔法即可解决它！

Answer 4

尝试删除 li 元素之间的所有空格和换行符。

由于您是内联显示它们，因此 HTML 中的空格将充当内联文本中的空格，并导致渲染时留下间隙。

Answer 5

添加

#mainNav li { 
  float:left;
}

到您的 CSS。

Answer 6

这是因为 HTML 文档中的新行将被解释为打印内容中的空格。由于所有“li”元素都位于新行上，因此它会在每个元素之间添加一个空格。确保将它们显示为块元素并将它们浮动到左侧，以便它们均匀地运行在一起。

Answer 7

您可以浮动列表元素，那么空格就不会干扰：

#mainNav li
{
 float: left;
 list-style-type: none;
}

Answer 8

我使用 li 标签上的 line-height 属性来解决这个问题。

ul li { line-height:0; }

Answer 9

最佳解决方案来自 http://www.cssplay.co.uk/menus/ centered.html。并引用：

我们需要做的就是将 ul 标签封装在宽度为 100% 并将溢出设置为隐藏的外部容器中。

然后使用相对位置设置

标记的样式，并向左浮动 50% 的左侧位置。

最后，

• 标记也使用相对位置进行样式设置，向左浮动，但这次的右侧位置为 50%。

  ...正如他们所说，这就是所需要的。

Answer 10

如果您使用 xslt 来显示这些元素，您应该进行以下操作：

<xsl:template match=".//text()">  
    <xsl:value-of select="normalize-space(.)" />
</xsl:template>