сделать так, чтобы плавающие элементы div продолжали складываться вправо

У меня есть родительский div 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 показывает горизонтальную полосу прокрутки для отображения части дочерних элементов div, превышающих 100%.

Однако дочерние элементы div складываются до тех пор, пока сумма ширины не достигнет 100 %, а все, что превышает 100 %, переходит к следующей строке, например:

| раздел 1 | | раздел 2 | | раздел 3 | | раздел 4 | | раздел 5 | | раздел 6 | | раздел 7 |

| раздел 8 | | раздел 9 |

Как сделать так, чтобы все эти 9 элементов div располагались справа в одной строке?

Благодарю вас!


css floating css-float
person Dongsan    schedule 10.11.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Плавающие элементы разбиваются на новые строки, как слова внутри длинной строки текста.

Чтобы слова не разбивались на новую строку, вы добавляете 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>

person Salman A    schedule 10.11.2014