Question

从this question开始，目的是在同一行上有一个选择框和按钮，选择框宽度填充所有可用空间。

这可以通过以下HTML实现：

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label" for="droplist">Select item:</label>
        <div class="col-xs-9">
            <button class="btn btn-primary">Action!</button>
            <div class="wrapper">
                <select id="droplist">
                    <option>Value 1</option>
                    <option>Value 2</option>
                </select>
            </div>
        </div>
    </div>
</form>

和CSS：

.wrapper {
    overflow: hidden;
    margin-top: .5ex;
}
select {
    width: 100%;
}
button {
    float: right;
}

JsFiddle

如果按钮被移动到包装div之后 - 对我来说这是一个结构直观的位置 - 然后按钮被推到下一行。

问题是： 为什么反转按钮和包装器div元素的顺序会导致按钮切换到新行？

Answer 1

由于未设置按钮宽度，要自动填充宽度，您需要将flexbox应用于col-xs-9容器。

＆＃13;

.col-xs-9 {
  width: 75%;
  display: flex;
}

.wrapper {
  margin-top: .5ex;
  flex: 1;
}

select {
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-xs-3 control-label" for="droplist">Select item:</label>
    <div class="col-xs-9">
      <div class="wrapper">
        <select id="droplist">
          <option>Value 1</option>
          <option>Value 2</option>
        </select>
      </div>
      <button class="btn btn-primary">Action!</button>
    </div>
  </div>
</form>

＆＃13;

编辑：

至于为什么你的代码不起作用，因为你把所有东西都浮动，所以按钮首先放在右边，然后是wrapper，它没有设置宽度。因此overflow: hidden设法将select元素保留在同一行中。如果您移除overflow，则select元素将移至下一行。

当您颠倒wrapper和button的顺序时，wrapper首先设置在右侧，而child select元素则设为{ 100％的{1}}，它填满整个空间，因为包装器没有宽度设置，溢出是没有意义的。因此width包裹到下一行

Answer 2

修改

这有点神秘，但我最好的猜测是，因为CSS是级联的，当按钮在之前时，它现在会在按钮的大小时浮动回流＆＃39;完成后，div宽度根据按钮进行调整。但如果按钮之后，CSS不知道，宽度占用了所有可用空间。

您应始终在浮动项目上设置宽度（除非直接应用于图像 - 具有隐式宽度）。如果未设置宽度，则结果可能无法预测。

另一种解决方法可能是使用display: table

＆＃13;
＆＃13;
.col-xs-9 { display: table; } .wrapper { overflow: hidden; margin-top: .5ex; width: 100%; } select { width: 100%; } .wrapper, button { display: table-cell; }
＆＃13;
<form class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label" for="droplist">Select item:</label> <div class="col-xs-9"> <div class="wrapper"> <select id="droplist"> <option>Value 1</option> <option>Value 2</option> </select> </div> <button class="btn btn-primary">Action!</button> </div> </div> </form>
＆＃13;
＆＃13;
＆＃13;

为什么溢出隐藏仅在元素按特定顺序时才起作用？

2 个答案: