删除图像之间不需要的空间答案

【问题标题】：Removing unwanted space between images删除图像之间不需要的空间
【发布时间】：2012-03-30 18:25:23
【问题描述】：

我的问题出在我的导航栏上，可以在这里找到：http://grupocoral.netai.net/

这些图像之间有一个空格，我想删除它。我该怎么做？

Javascript 代码：

function swap(element, image) {
  element.src = image;
}

还有html代码：

<div id="navbar"><a href="index.php"><img src="images/homeover.png"></a>
<a href="membros.php"><img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');"></a>
<a href="canticos.php"><img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');"></a>
<a href="celeb.php"><img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');"></a>
<a href="contactos.php"><img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');"></a>
</div>

以防万一，导航栏 CSS 代码：

#navbar{
    width: 1280px;
    margin: 0 auto;
    height: 40px;
    horizontal-align: center;
    padding:inherit;
}

顺便问一下，你知道没有 JS 的其他方法可以制作这样的菜单吗？

谢谢，兰格尔

【问题讨论】：

标签： javascript html css

【解决方案1】：

这是由于您的代码中的空白。删除链接之间的空白，这应该可以清除它。

换句话说，将您的 HTML 导航块更改为：

<div id="navbar"><a href="index.php"><img src="images/homeover.png"></a><a href="membros.php"><img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');"></a><a href="canticos.php"><img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');"></a><a href="celeb.php"><img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');"></a><a href="contactos.php"><img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');"></a>    </div>

【讨论】：

或将font-size: 0; 添加到#navbar。

【解决方案2】：

这使我的代码保持干净，并删除了代码中的空格。

<a><img src="" /></a><!-- 
--><a><img src="" /></a><!-- 
--><a><img src="" /></a><!-- 
--><a><img src="" /></a>

【讨论】：

嗯，从未想过以这种方式对抗可怕的空白。 +1 创意。

【解决方案3】：

像这样的内联元素依赖于空白，这意味着浏览器会在它们之间呈现一些空白。

为了解决这个问题，您可以在一行中同时运行所有元素

<a href="#">link</a><a href="#">link</a>

或阻止结束标签和开始标签

<a href="#">
     link</a><a href="#">
</a>
<a href="#">
     link</a><a href="#">
</a>

:)

【讨论】：

【解决方案4】：

要删除空格，只需删除锚点之间的断线：

我建议在没有 js 的情况下使用 css：

<div id="navbar">
<a class="home" href="#"></a><a href="" class="member"></a>....
</div>

CSS：

#navbar a{display:inline-block;margin:0;}
#navbar a.member{background:url(images/member.png) no-repeat 0 0}
#navbar a.member:hover{background:url(images/memberhover.png) no-repeat 0 0}

【讨论】：

【解决方案5】：

除了javascript 图像交换之外，您还有其他选择。您可以将CSS :hover 与background-image 结合使用。

dabblet 示例： http://dabblet.com/gist/2253898

CSS：

#Membros{
    background-image:url('http://grupocoral.netai.net/images/membros.png');
    width:240px;
    height:40px;
}
#Membros:hover {
    background-image:url('http://grupocoral.netai.net/images/membrosover.png');
}

HTML

<a href="index.php"><div id="Membros"></div></a>

我希望这会有所帮助！

【讨论】：

【解决方案6】：

顺便问一下，你知道没有 JS 的其他方法可以制作这样的菜单吗？

是的，这是example，我使用了您的一个背景图片链接，上面带有“主页”，您应该只使用一张图片，上面没有任何文字标签。

【讨论】：

【解决方案7】：

你也可以不使用 javascript 来改变图像源，而是使用 :hover css 伪类来改变背景，它需要你改变制作的方式，但即使 JS 被禁用，它也会使这个菜单工作 css_pseudo_classes

【讨论】：

也出于 SEO 的目的，您可能希望重组您的 html。类似于：