3

w3cからの定義： 通常の空白の シーケンスは単一の空白に折りたたまれます。テキストは必要に応じて折り返されます。これはデフォルトですPlayit» nowrap 空白のシーケンスは単一の空白に折りたたまれます。テキストが次の行に折り返されることはありません。
タグが見つかるまで、テキストは同じ行に続きます。

では、なぜそれが浮いた要素の見た目にそれほど大きな違いをもたらすのでしょうか？

たとえば、これを比較します。

うまく配置されたレイアウトを示す空白の法線を持つJsBin

<table>
    <thead>
      <tr>
        <th>
          <div style="background-color: lightblue; width: 600px; white-space: normal;">
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: left;">
              Button
            </span>
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: none;">
              Button
            </span>
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px; float:right;">
              Button right
            </span>
            <div style="clear: both" />
        </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr><td>note: white-space is normal here</td></tr>
    </tbody>
  </table>

空白：nowrapが使用されている場所でこれを白くする

上記と同じコードですが、今回は空白のみです：nowrap;

誰かが手がかりを得ましたか？ [編集] 人々が違いを見ることができないとコメントしたので、私は問題のある空白のスクリーンショットをアップロードします：nowrap私はfirefox10.0.4にいます 空白：nowrapはfirefox10.0.4で2行になります

4

3 に答える 3

4

white-space: nowrapFirefoxのfloat: right既知の「バグ」: https://bugzilla.mozilla.org/show_bug.cgi?id=488725

メニューの右揃えの三角形について質問します:メニュー要素の右の「左の三角形」に揃えます。padding-right、ネガmargin-left、およびを使用する fix を用意しますposition: absolute。

于 2014-08-05T15:51:27.640 に答える
4

上記の最初のコメントを多少撤回します。a 内にdivs floated がwhite-space: nowrap divあり、親divの幅が固定されている場合、コメントで述べた内容が得られます。ただし、あなたの子供がどちらかである場合、inlineまたはinline-blockそれらの子供divは、右側を超えて進み続けoverflowます（インラインテキストが行うのと同じように）。通常、float: left子が親の最後に到達すると、別の行に折り返されます。

このフィドルの図を確認してください。

于 2012-09-13T14:37:01.813 に答える
2

これを追加したかったhttp://jsfiddle.net/cstephe/tNHLL/は、少なくとも Firefox 10 で順序がこれにどのように影響するかを示しています。最新バージョンで家に帰ったら、これを確認します。

編集:これは、私にとってローカルでどのように見えるかです。

ここに画像の説明を入力

 <h2>float first: nowrap / Children: floating blocks</h2>
<div class="wrapper nowrap">
     <div class="inlineBlock floating"></div>
     <div class="inlineBlock floating float-right">r</div>
     <div class="inlineBlock">something</div>

</div>
<div class="clearfix"></div>
<h2>typical order: nowrap / Children: floating blocks</h2>
<div class="wrapper nowrap">
     <div class="inlineBlock floating"></div>

     <div class="inlineBlock">something</div>
    <div class="inlineBlock floating float-right">r</div>
</div>
于 2012-10-01T20:57:38.210 に答える