如何在不操纵HTML的情况下摆脱跨度之间的空白？

这是我的下拉菜单的代码。我从一个教程产生了这样的代码：http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html 如何在不操纵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摆脱我的跨度图像之间出现空白的？

来源

2012-06-27 user1486934

你可以让这些跨度浮动块元素 – Aprillion

我应该如何专门去有关实现浮动/块属性？ – user1486934

尝试对图像元素设置display: inline-block。跨度应该是内联，所以最好的解决方案将是根本不使用跨度，但因为你说不要改变html ...

看看如何在这个小提琴的图像之间没有空格：http://jsfiddle.net/rVTZc/

来源

2012-06-27 22:13:14 tuff

inline-block的有同样的问题，加入填充左财产。实际上，'inline-block'比'inline'更容易出现问题，因为'inline'通常是文本的一部分，其中的空白是相关的。 – Spudley

我改变了CSS中的跨度以在顶部添加显示，但它仍然不起作用。是否还有其他可能对代码做出反应的其他内容？ – user1486934

从这个风格：

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

删除

right top

来源

2012-06-27 22:05:54

我找到了解决办法，有一个在CSS我复制并粘贴:) – user1486934

如果我理解你正确地，也许ul { font-size:0 }将帮助？

来源

2012-06-27 22:07:12 egasimus

这是一个常见问题。 inline-block比inline更常见，因为inline通常意味着它在文本流中，其中空白是相关的。由于inline-block，人们正在使用它进行布局，并且白色空间成为问题。

有一个新的CSS属性专门设法处理这个问题 - white-space:collapse;和white-space-collapse: discard;，但遗憾的是它还没有被任何主流浏览器支持。所以这不是一个选项。

如果没有这一点，解决这个问题的方法往往会有些诡异。

一个常见的解决方案是将容器元素设置为font-size:0;。这有效地使空白无关紧要;它仍然存在，但不占用任何空间。这里的缺点是你需要为内部元素重新设置字体大小。如果您使用基于em的字体大小的动态布局，则处理起来可能会非常棘手。

将布局切换为float:left布局将消除此问题，但会引入其他问题。就我个人而言，我从来不喜欢使用float，但它可能是某些情况下的答案。

你也可以使用Javascript来删除空格，但那真的是一个黑客。

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

来源

2012-06-27 22:27:11 Spudley

+1更多选择：http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – lepe

如何在不操纵HTML的情况下摆脱跨度之间的空白？

回答

相关问题