1

以下は、単純な HTML ページのコードです。
コンテナーのスタイルにオーバーフローと空白の設定があるにもかかわらず、ページのサイズが変更されるとコントロールが折り返されます。Chromeブラウザでテストしています。

コンテナスタイルにも float:left を追加することで解決するようです。しかし、そもそもなぜラップが行われるのか興味がありますか? 他の複雑さを引き起こす可能性があるため、コンテナを左にフロートさせたくありません。

#container {
  overflow: hidden;
  white-space: nowrap;
}

.tmplLabelHorizontal {
  float: left;
}

.tmplLabelHorizontalWithLeftSpacing {
  float: left;
  margin-left: 30px;
}
<div id="container">

  <div id="tmplTabShiftPanelRow1">

    <label class="tmplLabelHorizontal">Start Time:</label>

    <div style="float:left">
      <input maxLength="8" style="width:60px; " type="text" />
    </div>

    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label>

    <div style="float:left">
      <input maxLength="8" style="width:60px; " type="text" />
    </div>

    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label>

    <div style="float:left">
      <input maxLength="8" style="width:60px; " type="text" />
    </div>


    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label>

    <div style="float:left">
      <input maxLength="8" style="width:60px; " type="text" />
    </div>


    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label>

    <div style="float:left">
      <input maxLength="8" style="width:60px; " type="text" />
    </div>

    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label>

    <div style="float:left">
      <input maxLength="8" style="width:60px; " type="text" />
    </div>

    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label>

    <div style="float:left">
      <input maxLength="8" style="width:60px; " type="text" />
    </div>


    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label>

    <div style="float:left">
      <input maxLength="8" style="width:60px; " type="text" />
    </div>



  </div>

</div>

4

4 に答える 4

0

スタイルを試してみましたか

word-wrap: normal;
于 2013-05-09T04:06:20.703 に答える
0

white-spaceフローティング要素ではなく、インライン要素とテキストに影響します。

display:inline-blockの代わりに使ってみてくださいfloat:left。

于 2013-05-09T04:07:09.147 に答える
0

正しい方法は、そのように div 内でラベルをラップすることです。

<div id="container">
    <div id="tmplTabShiftPanelRow1">
        <div style="float:left">
            <label class="tmplLabelHorizontal">Start Time:</label>
            <input maxLength="8" style="width:60px; " type="text" />
        </div>
    </div>
</div>
于 2013-05-09T04:09:22.770 に答える
0

div はブロック要素です。したがって、float値を指定しない場合、これらはラップされません。div をラップするための回避策は adddisplay: inlineまたはdisplay:inline-blockで、ブロック要素のように動作しないようにします。

divが必要ない場合spansの代わりに、別の解決策が使用されます。divsSpan はブロック要素ではないため、自動的にラップされます。

于 2013-05-09T05:50:40.573 に答える