html - 如何从 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

更新

至少还有2种方法：

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