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

时间:2012-06-27 21:37:45

标签: css whitespace 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中使用此代码来摆脱跨度图像之间出现的空白区域?

4 个答案:

答案 0 :(得分:10)

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

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

如果没有这个,解决方案往往有点黑客。

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

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

您也可以使用Javascript删除空格,但这确实是一个黑客。

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

从这种风格:

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

删除

right top

答案 3 :(得分:0)

如果我理解正确,也许ul { font-size:0 }会有帮助吗?