12

重複の可能性：
インラインブロックリストアイテム間のスペース

HTMLコードのJSFiddleデモがあります。ここにコードがあります：

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

私が抱えている問題は、Hello World！の「o」と「r」の間に余分なスペースが挿入されていることです。スタイルがnoneに設定されているので、スペースなしでフレーズをdisplay取得する方法を教えてもらえますか？Hello World!

4

3 に答える 3

27

改行が原因です-http ://jsfiddle.net/RhvjF/1/

特定の投稿を見つけることができませんが、賢い人々はそれを修正する3つの方法を提案しました：

  1. すべてを1行にまとめます（すべての改行を削除します）

  2. 次のように、改行をコメントアウトします

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

  3. コンテナfont-sizeをに設定し、 -s0に再設定しますspan

アップデート

少なくとも2つの方法があります。

  1. 次のようにタグを壊します

    <span style="display: inline">Hello Wo</span
><span style="display: none;"></span
><span style="display: inline">rld</span>
  2. 要素をフロートさせます。span { float: left }
于 2012-08-29T17:26:39.530 に答える
8

これは改行が原因です。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>
于 2012-08-29T17:28:32.793 に答える
5

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 */
}
于 2012-08-29T17:30:31.453 に答える