如何从HTML中删除“Invisible space”[复制]

Possible Duplicate:
A Space between Inline-Block List Items

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

I have a JSFiddle demo of my html code. Here is the code here:

我有一个我的HTML代码的JSFiddle演示。这是以下代码:

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

The problem I'm having is that an extra space is being inserted between the 'o' and the 'r' in Hello World!. The display style is set to none, so can someone please tell me how I can get the Hello World! phrase without the space?

我遇到的问题是在Hello World中'o'和'r'之间插入了一个额外的空间!显示样式设置为无,所以有人可以告诉我如何获得Hello World!没有空间的短语?

3 个解决方案

#1

The linebreaks are causing it - http://jsfiddle.net/RhvjF/1/

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

Can't find the particular post, but smart people suggested 3 ways of fixing it:

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

1. Put everything in one line (remove all line breaks)

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

2. Comment out the line breaks, like

   注释掉换行符,比如

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

3. Set the container font-size to 0 and re-set it for span-s

   将容器font-size设置为0并将其重新设置为span-s

UPDATE

There are at least 2 more ways:

还有至少两种方式:

1. Break the tags, like

   打破标签,比如

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

2. Float the elements, i.e. span { float: left }

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

#2

This is caused by line breaks. You have two choices:

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

1. Remove the line breaks

删除换行符

2. Float your content.

浮动您的内容。

Option 1

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

Option 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>

#3

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