如何摆脱空格之间的白色空间而不操纵HTML？ [英] How do I get rid of white spaces between spans without manipulating the HTML?

问题描述

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

但我不是文字导航，我有图片，你可以看到在附加到span id的CSS中。有了这个代码，我给每个span的下拉菜单正确，我只是不能摆脱它们之间的空白。

我知道一个新行在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 =＃>菜单项1< / a>< / li> 
< li>< a href =＃>菜单项2< / a>< / li> 
< li class =last>< a href =＃>菜单项6< / a>< / li> 
< / ul>< / li>< li class =hasmore>< a href =＃>< span id =wild>< / span> ; / a> 
< ul class =dropdown> 
< li>< a href =＃>菜单项1< / a>< / li> 
< li>< a href =＃>菜单项2< / a>< / li> 
< li class =last>< a href =＃>菜单项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 c $ c>对图像元素。间距应该是内联的，所以最好的解决方案是不使用跨度，但因为你说不改变html ...

查看如何这个小提琴的图片之间没有空格： http://jsfiddle.net/rVTZc/

This is my code for a drop down menu. I pulled the code from a tutorial that produced this: http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html

But instead of text navigation I have images as you can see in the CSS attached to the span id's. With this code, I'm given the dropdown menus for each span correctly, I just can't get rid of the white space between them.

I know a new line in HTML between divs/spans create whitespaces, but I want to know a way to rid of them in 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>

This is some CSS that applies:

#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;
}

What do I need to do to this code in CSS to get rid of the white space that appears between my span images?

解决方案

Try setting display: inline-block on the image elements. Spans are supposed to be inline, so the best solution would be to not use spans at all, but since you said don't change the html...

See how there's no spaces between the images in this fiddle: http://jsfiddle.net/rVTZc/

这篇关于如何摆脱空格之间的白色空间而不操纵HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！