플로팅 div가 오른쪽으로 계속 스택합니다.

Question

부모 div가 form-group이고 양식 그룹 내에 여러 개의 부동 div가 있습니다.

.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; } 

을 그리고 여기 그들이 위치하는 방법은 다음과 같습니다 :

여기에 자신의 CSS 속성의

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

부모 사업부는 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>