我该如何摆脱跨度之间的白色空间没有操纵HTML？(How do I get rid of white

这是我的一个下拉菜单中的代码。 我把代码生成此教程： http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html

而是文字导航我有图片，你可以在连接到跨度ID的CSS的看到。 有了这个代码，我在正确的给出每个跨度的下拉菜单，我只是无法摆脱它们之间的白色空间。

我知道在HTML的div /跨度创建空格之间的新线，但我想知道的方式在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:

这是一个常见的问题。 更常见inline-block比inline ，如inline通常意味着它在文本流，其中白色空间是相关的。 随着inline-block ，人们都在使用它的布局和空格成为一个问题。

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

如果没有这一点，这个解决方案往往是有点哈克。

一个常见的解决方案是设置在容器元件到font-size:0; 。 这有效地呈现空白无关; 它仍然存在，但不占用任何空间。 这里的缺点是，你那么就需要再次对内部元件设置字体大小。 如果您使用的是动态布局， em基于字体大小，这可能会非常棘手处理。

切换布局的float:left布局将删除这个问题，但引入了其他问题。 我个人从来不喜欢用浮法工作，但它可能对某些情况下的答案。

你也可以使用JavaScript把空格去掉，但是这确实是一个黑客。

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

Answer 3:

从这个风格：

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

去掉

right top

Answer 4:

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

文章来源: How do I get rid of white spaces between spans without manipulating the HTML?