如何从HTML中删除“隐形空间”

可能重复：
内嵌块列表项之间的空格

我有我的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

linebreaks造成它 – http://jsfiddle.net/RhvjF/1/

找不到特定的post，但聪明的人提出了三种解决方法：

1. 将所有内容放在一行（删除所有换行符）

2. 注释掉换行符

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

3. 将container font-size为0并重新设置span -s

UPDATE

至less有两种方法：

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

这是由换行引起的。 你有两个select：

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 */ }