如何从HTML中删除"不可见空间"

Question

可能重复:
内联块列表项之间的空格

我有一个我的HTML代码的JSFiddle演示.这是这里的代码:

<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>?

我遇到的问题是在Hello World中'o'和'r'之间插入了一个额外的空间!该display样式设置为无,所以有人告诉我怎样才能得到Hello World!,而没有空间句话？

Answer 1

换行正在引起它 - http://jsfiddle.net/RhvjF/1/

无法找到特定的帖子,但聪明人提出了3种修复方法:

1. 将所有内容放在一行(删除所有换行符)

2. 注释掉换行符,比如

   <span style="display: inline">Hello Wo</span><!--
   --><span style="display: none;"></span><!--
   --><span style="display: inline">rld</span>
   

3. 容器设置font-size到0和重新设置它span-s

UPDATE

还有至少两种方法:

1. 打破标签,比如

   <span style="display: inline">Hello Wo</span
   ><span style="display: none;"></span
   ><span style="display: inline">rld</span>
   

2. 浮动元素,即 span { float: left }

Answer 2

这是由换行引起的.你有两个选择:

1. 删除换行符
2. 浮动您的内容.

选项1

<span style="display: inline">Hello Wo</span><span style="display: none;"></span><span style="display:inline">rld</span>?

选项2

<style>
    #spanContainer > span { float:left; }?
</style>

<div id="spanContainer">
    <span style="display: inline">Hello Wo</span>
    <span style="display: none;"></span>
    <span style="display: inline">rld</span>?
</div>

Answer 3

见http://jsfiddle.net/RhvjF/2/

HTML:

<div id="wrapper">
    <span style="display: inline">Hello Wo</span>
    <span style="display: none;"></span>
    <span style="display: inline">rld</span>
</div>

CSS:

#wrapper{
    font-size:0;
}
#wrapper>*{
    font-size:16px; /* Or whatever you want */
}