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

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

但是我没有文本导航,而是在附加到span id的CSS中可以看到图像.使用此代码,我正确地给出了每个跨度的下拉菜单,我无法摆脱它们之间的空白区域.

我知道div / spans之间的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/

原文地址：https://www.jb51.cc/css/217320.html