圖像之間消除不必要的空間

我的問題是在我的導航欄，可以在這裏找到：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的菜單？

感謝， langel

來源

2012-03-30 langel

這是由於在代碼中的空白。刪除您的鏈接之間的空白，並應該清除它。

換句話說，改變你的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>

來源

2012-03-30 18:30:18 j08691

或者添加'font-size：0;'到#navbar。 – mystrdat 2012-03-30 18:32:39

它的工作感謝:) – langel 2012-03-30 18:34:38

像這樣的內聯元素是空白依賴，這意味着瀏覽器會將它們之間的一些空白。

對付這個你可以在同一行

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

所有的元素一起運行或阻止關閉和開啓標籤

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

來源

2012-03-30 18:31:43 Kyle

這使我的代碼乾淨並刪除代碼中的空格。

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

來源

2012-03-30 18:32:24

嗯，從來沒有想過這樣的戰鬥可怕的白色空間。 +1創造力。 – mystrdat 2012-03-30 18:34:21

也可以代替使用JavaScript來改變圖像的來源，用途：懸停的CSS僞類改變的背景下，它會要求你改變的方式製作，但它將使這個菜單的工作，甚至當JS被禁用 css_pseudo_classes

來源

2012-03-30 18:38:09

也爲SEO的目的，你可能想重組你的HTML。類似：

...

– 2012-03-30 18:50:19

刪除空間只是刪除錨點前之間的分界線：

我建議使用的CSS沒有JS：

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

來源

2012-03-30 18:39:44 amd

你確實有一個替代選項，您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>

我希望這有助於！

來源

2012-03-30 18:46:26 Khan

順便說一句，你知道有沒有其他的方式來製作沒有JS的菜單嗎？

是的，這裏是一個example，我已經使用了其中的一個背景圖像鏈接'Home'，它只能使用一個沒有任何文本標籤的圖像。

來源

2012-03-30 18:47:08

圖像之間消除不必要的空間

回答

相關問題