Question

我有一个父div form-group，而在form-group里面有多个浮动div。

这是他们的css属性：

.form-group {
    overflow: auto;
    width: 100%;
}

.department { width: 10%; white-space: nowrap; float: left; }
.firstname { width: 10%; white-space: nowrap; float: left; }
.lastname { width: 10%; white-space: nowrap; float: left; }
.title { width: 15%; white-space: nowrap; float: left; }
.email { width: 15%; white-space: nowrap; float: left; }
.mobile { width: 15%; white-space: nowrap; float: left; }
.phone { width: 15%; white-space: nowrap; float: left; }
.fax { width: 15%; white-space: nowrap; float: left; }
.remark { width: 20%; white-space: nowrap; float: left; }

以下是他们的定位：

<div class="form-group">

    <div class="clear"></div>

    <div class="department"><input name="contact[][department]" type="text" value="<?php echo $contact['department']; ?>"></div>
    <div class="firstname"><input name="contact[][firstname]" type="text" value="<?php echo $contact['firstname']; ?>"></div>
    <div class="lastname"><input name="contact[][lastname]" type="text" value="<?php echo $contact['lastname']; ?>"></div>
    <div class="title"><input name="contact[][title]" type="text" value="<?php echo $contact['title']; ?>"></div>
    <div class="email"><input name="contact[][email]" type="text" value="<?php echo $contact['email']; ?>"></div>
    <div class="mobile"><input name="contact[][mobile]" type="text" value="<?php echo $contact['mobile']; ?>"></div>
    <div class="phone"><input name="contact[][phone]" type="text" value="<?php echo $contact['phone']; ?>"></div>
    <div class="fax"><input name="contact[][fax]" type="text" value="<?php echo $contact['fax']; ?>"></div>
    <div class="remark"><input name="contact[][remark]" type="text" value="<?php echo $contact['remark']; ?>"></div>
    <button type="button" class="btn btn-default removeButton fl"><i class="fa fa-minus"></i></button>

    <div class="clear"></div>

</div>

父div被赋予overflow: auto;并且浮动子div的总宽度超过100％。所以我期待浮动子div被堆叠到右边，而父div显示一个水平滚动条来显示超过100％的子div的部分。

然而，子div被堆叠，直到宽度总和达到100％，超过100％的所有内容都会转到下一行，如下所示：

| div 1 | | div 2 | | div 3 | | div 4 | | div 5 | | div 6 | | div 7 |

| div 8 | | div 9 |

如何在一行中将所有这9个div叠加到右边？

谢谢！

Answer 1

浮动元素就像长行文本中的单词一样分成新行。

为了防止单词进入新行，您需要在元素上添加white-space: nowrap。您可以使用相同的技术，但为此您必须抛弃浮动并使用display: inline-block。

.form-group {
  white-space: nowrap;
}
.form-group > div {
  display: inline-block;
  width: 15%;
}
/* not relevant */

.form-group input {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

<div class="form-group">
  <div class="department"><input></div>
  <div class="firstname"><input></div>
  <div class="lastname"><input></div>
  <div class="title"><input></div>
  <div class="email"><input></div>
  <div class="mobile"><input></div>
  <div class="phone"><input></div>
  <div class="fax"><input></div>
  <div class="remark"><input></div>
</div>

使浮动div继续向右堆叠

1 个答案: