【问题标题】:CSS gaps between image links for no reason图片链接之间无缘无故的CSS间隙
【发布时间】:2011-02-09 04:01:19
【问题描述】:

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

您看,导航是由内联显示的图像链接的无序列表组成的,但是每个图像之间存在间隙,左、右、顶部和底部,我不明白为什么。在所有浏览器中都是一样的。

这是页面的链接,来源:Beansheaf Temporary

css链接:http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/fund2.css

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

【问题讨论】:

  • 嗯,小世界;我在那里吃过饭。 =)

标签: html css padding margin


【解决方案1】:

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

因为您是内联显示它们,所以 HTML 中的空格将就像它们是内联文本中的空格一样,并导致在呈现时留下间隙。

【讨论】:

  • 谢谢,我现在明白了。 (对不起,我已经为每个人复制并粘贴了这个,但你们都有相同的答案:))
【解决方案2】:

添加

#mainNav li { 
  float:left;
}

到您的 CSS。

【讨论】:

  • 谢谢,我现在明白了。 (对不起,我已经为每个人复制并粘贴了这个,但你们都有相同的答案:))
【解决方案3】:

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

【讨论】:

    【解决方案4】:

    您可以浮动列表元素,然后空格不会干扰:

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

    【讨论】:

    • 谢谢,我现在明白了。 (对不起,我已经为每个人复制并粘贴了这个,但你们都有相同的答案:))
    【解决方案5】:

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

    请注意,结束&lt;/li&gt; 标记在后续行中关闭(最后一行除外),这是有效的并保持可读性(至少对我而言)。

    另一个选项有点混乱

    <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 &lt;!-- ... --&gt; 注释掉原本会折叠成单个空格的空格。

    我确实希望有某种方式来指定(例如):

    ul li img {whitespace: none-between; }
    

    【讨论】:

    • 感谢您的回答,我使用了注释方法,因此 float 不会与 CSS 发生任何冲突。
    • @Infiniti Fizz:不客气,感谢您的支持。此外,下次我去那里吃饭时,我会说我帮助了网站。即使酒吧工作人员丝毫不在乎 =)
    • 我遇到了类似的问题,只是我没有将每个图像链接都作为新的列表项。我最终将它们全部压缩成一行,我从来没有想过要把评论放进去。谢谢。这会有所帮助
    • 哇,这很有启发性。谢谢!
    【解决方案6】:

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

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

    【讨论】:

    • 谢谢,我现在明白了。 (对不起,我已经为每个人复制并粘贴了这个,但你们都有相同的答案:))
    【解决方案7】:

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

    ul li { line-height:0; }
    

    【讨论】:

      【解决方案8】:

      图片链接下方的空白是由于图片默认与基本文本行对齐,您可以简单地声明解决它

      li img {
          vertical-align:bottom;
      }
      

      魔法!

      【讨论】:

      • 完美!!!这正是从 XHTML 迁移到 HTML5 所需要的,所有其他方法都行不通 - 花我半天的时间来找出原因,你的提示是唯一有用的!起来!!!
      【解决方案9】:

      这个问题的最佳解决方案来自http://www.cssplay.co.uk/menus/centered.html。并引用:

      我们需要做的就是将 ul 标签包含在一个宽度为 100% 且溢出设置为隐藏的外部容器中。

      &lt;ul&gt; 标记随后使用相对位置设置样式,并以 50% 的左侧位置向左浮动。

      最后,&lt;li&gt; 标签也设置了相对位置样式,向左浮动,但这次的右侧位置为 50%。

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

      【讨论】:

        【解决方案10】:

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

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

        【讨论】: