如何在不操纵HTML的情况下摆脱跨度之间的空白区域？
这是我的下拉菜单的代码。 我从产生这个的教程中提取代码：http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html
但不是文本导航，我有图像，你可以在连接到span 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中使用这些代码来摆脱我的跨度图像之间出现的空白区域？
尝试在图像元素上设置display: inline-block 。 跨度应该是内联的，所以最好的解决方案是根本不使用跨度，但因为你说不要更改html ...
看看这个小提琴中的图像之间没有空格：http://jsfiddle.net/rVTZc/
这是一个常见问题。 inline-block比inline更常见，因为inline通常意味着它在文本流中，其中空白是相关的。 使用inline-block ，人们正在使用它进行布局，并且白色空间成为问题。
有一个新的CSS属性专门试图解决这个问题 - white-space:collapse; 和white-space-collapse: discard; ，但遗憾的是它还没有被任何主流浏览器支持。 所以这不是一个选项。
如果没有这个，那么解决这个问题的方法往往有点不方便。
一个常见的解决方案是将容器元素设置为font-size:0; 。 这有效地使空白无关紧要; 它仍然存在，但不占用任何空间。 这里的缺点是你需要为内部元素重新设置字体大小。 如果您使用动态布局，使用基于em的字体大小，这可能会很棘手。
将布局切换到float:left布局将消除此问题，但会引入其他问题。 就我个人而言，我从来不喜欢使用float，但它可能是某些情况下的答案。
你也可以使用Javascript来删除空格，但那真的是一个黑客。
除此之外，重新安排HTML代码以删除空格是最有可能的最佳解决方案。 我知道这不是你想要的。
从这种风格：
#menu ul li a:hover span {
background: url("images/topselectionright.png") repeat scroll right top transparent;
}
去掉
right top
上一篇: How do I get rid of white spaces between spans without manipulating the HTML?