如何在不操縱HTML的情況下襬脫跨度之間的空白？

Question

這是我的下拉菜單的代碼。我從一個教程產生了這樣的代碼：http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html

但不是文本導航我有圖像，你可以看到在連接到跨度id的CSS。通過這段代碼，我可以正確地獲得每個跨度的下拉菜單，但我無法擺脫它們之間的空白區域。

我知道在div/span之間的HTML新行創建空格，但我想知道一種方法來擺脫它們在CSS中。

<div id="menu"> 
<ul class="tabs"> 
<li class="hasmore"><a href="#"><span id="bird"></span></a> 
    <ul class="dropdown"> 
     <li><a href="#">Menu item 1</a></li> 
     <li><a href="#">Menu item 2</a></li> 
     <li class="last"><a href="#">Menu item 6</a></li> 
    </ul></li><li class="hasmore"><a href="#"><span id="wild"></span></a> 
    <ul class="dropdown"> 
     <li><a href="#">Menu item 1</a></li> 
     <li><a href="#">Menu item 2</a></li> 
     <li class="last"><a href="#">Menu item 6</a></li> 
    </ul> 
</li> 

</ul> 
</div> 

這是一些CSS適用：

#menu ul 
{ 
margin: 0 auto; 
} 

ul.tabs 
{ 
display: table; 
margin: 0; 
padding: 0; 
list-style: none; 
position: relative; 
} 

ul.tabs li 
{ 
margin: 0; 
padding: 0; 
list-style: none; 
display: table-cell; 
float: left; 
position: relative; 
} 

ul.tabs a 
{ 
position: relative; 
display: block; 
} 

#bird { 
background-image:url(images/birdingnav.png); 
width:80px; 
height: 20px; 
text-indent:-9009px; 
font-size: 0px; 
border: 0; 
} 

#wild { 
background-image:url(images/wildernessnav.png); 
width:119px; 
height: 20px; 
text-indent:-9009px; 
font-size:0px; 
border: 0; 
} 

什麼我需要做的，這個代碼CSS擺脫我的跨度圖像之間出現空白的？

Answer 1

嘗試對圖像元素設置display: inline-block。跨度應該是內聯，所以最好的解決方案將是根本不使用跨度，但因爲你說不要改變html ...

看看如何在這個小提琴的圖像之間沒有空格：http://jsfiddle.net/rVTZc/

Answer 2

從這個風格：

#menu ul li a:hover span { 
    background: url("images/topselectionright.png") repeat scroll right top transparent; 
} 

刪除

right top 

Answer 3

如果我理解你正確地，也許ul { font-size:0 }將幫助？

Answer 4

這是一個常見問題。 inline-block比inline更常見，因爲inline通常意味着它在文本流中，其中空白是相關的。由於inline-block，人們正在使用它進行佈局，並且白色空間成爲問題。

有一個新的CSS屬性專門設法處理這個問題 - white-space:collapse;和white-space-collapse: discard;，但遺憾的是它還沒有被任何主流瀏覽器支持。所以這不是一個選項。

如果沒有這一點，解決這個問題的方法往往會有些詭異。

一個常見的解決方案是將容器元素設置爲font-size:0;。這有效地使空白無關緊要;它仍然存在，但不佔用任何空間。這裏的缺點是你需要爲內部元素重新設置字體大小。如果您使用基於em的字體大小的動態佈局，則處理起來可能會非常棘手。

將佈局切換爲float:left佈局將消除此問題，但會引入其他問題。就我個人而言，我從來不喜歡使用float，但它可能是某些情況下的答案。

你也可以使用Javascript來刪除空格，但那真的是一個黑客。

除此之外，重新安排HTML代碼以刪除空格是最有可能的最佳解決方案。我知道這不是你想要的。