css - 为什么当浏览器调整大小时，下面页面中的 html 控件会换行

Question

下面是一个简单的 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>

Answer 1

你试过这种风格吗

word-wrap: normal;