Question

以下是简单HTML页面的代码尽管容器样式中存在溢出和空白设置，但控件将在页面重新调整大小时进行换行。我正在使用Chrome浏览器进行测试。

似乎可以通过添加一个浮点数来解决：左边也是容器样式。但我很好奇为什么包裹首先发生？我真的不想将容器漂浮到左边，因为它可能会导致其他并发症。

#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;

Answer 2

white-space会影响内联元素和文本，而不会影响浮动元素。

尝试使用display:inline-block代替float:left。

Answer 3

正确的方法是将标签包装在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>

Answer 4

Div是块元素。因此，如果您不指定任何float值，则不会包含这些值。解决div被包装的工作是添加display: inline或display:inline-block，这样它们就不会像块元素一样。

如果您不需要div，另一种解决方案是使用spans而不是divs。 Span不是块元素，因此它们将自动换行。

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

4 个答案: