Question

我的问题出在我的导航栏中，可在此处找到：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>

以防万一，navbar CSS代码：

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

那么，你知道在没有JS的情况下制作这样的菜单的其他方法吗？

谢谢， langel

Answer 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>

Answer 2

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

要解决此问题，您可以在一行中将所有元素一起运行

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

或阻止结束和开始标记

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

：）

Answer 3

这样可以保持我的代码清洁，并删除代码中的空格。

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

Answer 4

删除空格只需删除锚点ex：

之间的断行

我建议使用没有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}

Answer 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>

我希望这有帮助！

Answer 6

那么，你知道在没有JS的情况下制作这样的菜单的其他方法吗？

是的，这是一个example，我使用了一个带有'Home'的背景图片链接，你应该只使用一个没有任何文字标签的图片。

Answer 7

你也可以代替使用javascript来改变图像源，使用：hover css伪类改变背景，它将要求你改变方式，但即使JS被禁用也会使这个菜单工作 css_pseudo_classes

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

7 个答案: