如何删除两个< span>之间的空格标签？ [英] How to remove the space between two <span> tags?

问题描述

我有一个跨度列表。在HTML文件中，为了可读性和维护，可以在不同的行中列出这些< span> 标签是很好的：

 < span>< a href =some link> A link< / a>< / span> 
< span>< a href =some link>链接< / a>< / span> 
< span>< a href =some link>链接< / a>< / span> 
< span>< a href =some link>链接< / a>< / span> 
< span>< a href =some link>链接< / a>< / span> 
  

但是，这些在< span> 标签。我想知道是否有任何CSS或其他方式来删除两个< span> 标签之间的这个空格，而不将所有上面的跨度在一行之间没有任何空格？ / p>

请注意，我们假设上述html结构不能更改。

感谢和问候。 b
$ b

-------- UPDATE ------------

阅读dfsq的解决方案和其他相关帖子后，我觉得没有完美的答案。它真的取决于具体的需要。 dfsq的解决方案是聪明的，应该工作，但使事情变得复杂。

我有关于特定需求的是两个跨度之间有一个边框，边框和跨度之间的空间应该是相同的。对于我的特殊需要，我发现了两个可以接受的解决方案：

1. 使用CSS浮动span




2. 添加如下的额外空格：< span>< a href =some link> A link< / a>& nbsp; ; / span>




希望这有帮助。

解决方案

我通常将父容器的 font-size 设置为零，消失。然后，您只需要将字体大小设置回跨度的必要值，例如：

  .container {
 font-size：0; // whitespaces go away 
} 
 .container span {
 font-size：16px; // spans text please stay 
 background：#DDD; 
 padding：2px 4px; 
} 
  





演示：http://jsfiddle.net/we9bvrpe/

I have a list of spans. In the HTML file, it is nice to list these <span> tags in different lines for readability and maintenance as follows:

<span><a href="some link">A link</a></span>
<span><a href="some link">A link</a></span>
<span><a href="some link">A link</a></span>
<span><a href="some link">A link</a></span>
<span><a href="some link">A link</a></span>

However, these create a space between these <span> tags. I am wondering if there is any CSS or other way to remove this space between two <span> tags without putting all above spans in one line without any space in between?

Note that we assume that the above html structure cannot change.

Thanks and regards.

-------- UPDATE ------------

After reading dfsq's solution and other related posts, I feel there is no perfect answer. It really depends on the specific need. dfsq's solution is clever and should work but get things over complicated.

What I have regarding the specific need is having a border between two spans and the space between the border and span should be the same. For my particular need, I found the two acceptable solutions too:

1. Use CSS to float span

2. Add an extra space as follows: <span><a href="some link">A link</a>&nbsp;</span>

Hope this helps.

解决方案

I usually set font-size of the parent container to zero, which makes white spaces causing gaps to disappear. You then just need to set font-size back to necessary value for spans, for example:

.container {
    font-size: 0;     // whitespaces go away
}
.container span {
    font-size: 16px;  // spans text please stay
    background: #DDD;
    padding: 2px 4px;
}

Demo: http://jsfiddle.net/we9bvrpe/

这篇关于如何删除两个< span>之间的空格标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！