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 被包裹的一种解决方法是 add display: inlineor display:inline-block，这样它们的行为就不会像块元素一样。

好吧spans，divs如果您不需要 div，则使用另一种解决方案。Span 不是块元素，所以它们会自动换行。

于 2013-05-09T05:50:40.573 回答