css - 如何在不操作 HTML 的情况下去除 span 之间的空白？

Question

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

但是我有图片而不是文本导航，正如您在附加到 span id 的 CSS 中看到的那样。使用此代码，我正确地获得了每个跨度的下拉菜单，我只是无法摆脱它们之间的空白。

我知道 HTML 中 div/spans 之间有一个新行创建空白，但我想知道一种在 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

这是一个常见问题。 inline-block 比 inline 更常见，因为 inline 通常意味着它在文本流中，其中空白是相关的。使用 inline-block，人们将其用于布局，空白区域成为一个问题。

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

如果没有这个，解决这个问题的方法往往有点老套。

一种常见的解决方案是将容器元素设置为font-size:0;。这有效地使空白区域变得无关紧要；它仍然存在，但不占用任何空间。这里的缺点是您需要为内部元素再次设置字体大小。如果您使用动态布局，使用基于 em 的字体大小，这可能很难处理。

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

您也可以使用 Javascript 来删除空格，但这确实是一种 hack。

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