Question

我一直试图让这个水平导航现在排序过去几个小时，但没有任何工作。我试过reset.css样式表，* {padding：0;保证金：0）等我的图像链接之间仍然存在间隙。

你看，导航是由内联显示的无序图像链接列表组成，但每个图像之间，左，右，上，下都有间隙，我看不清楚原因。它在所有浏览器中都是一样的。

以下是该页面的链接，因此来源：Beansheaf Temporary

链接到css： 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>

请注意，关闭</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注释来注释掉原本会被折叠到一个空格中的空格。

我确实希望有一些方法可以指定（例如）：

ul li img {whitespace: none-between; }

Answer 2

另一种避免浮动的方法是将容器上的font-size设置为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％，溢出设置为隐藏。

然后<ul>标签的样式为相对位置，左侧浮动，左侧位置为50％。

最后，<li>标签的样式也是相对位置，向左浮动，但这次是50％的正确位置。

......正如他们所说，只需要这一切。

Answer 10

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

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

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

10 个答案: