div에서 가로로 일렬로 정렬

Question

부모 컨테이너가 있고 내부에 여러 줄의 div가 있는데 한 줄로 표시해야하는 시나리오가 나타났습니다.

요구 사항은 다음과 같습니다

1. 사업부의 수의가
2. 우리가 슬쩍 수있는 가로 스크롤 막대가 있어야 다를 수
3. 항목의 각각의 너비를 변경하고 항목을 선택하십시오.

여러 솔루션을 시도했지만 아무 것도 예상대로 작동하지 않습니다. 내가 자식 div의 display:inline-table으로 시도했을 때, 그것은 PC에서 작동하지만 아이폰에서는 실패합니다.

.container { 
 
    background-color: #fff; 
 
    border-top: 1px solid grey; 
 
    display: flex; 
 
    overflow: -moz-scrollbars-none; 
 
    overflow-x: scroll !important; 
 
    } 
 
.child { 
 
    display: inline-table; 
 
    }

<div class="container"> 
 
    <div class="child">Shirt</div> 
 
    <div class="child">Jeans</div> 
 
    . 
 
    . 
 
    . 
 
    . 
 
    . 
 
    . 
 
    <div class="child">Swetter</div> 
 
    <div class="child">T-shirts<div> 
 
<div> 
 

사람이이 문제를 해결하기 위해 나를 도울 수 :

코드는 같다?

Answer 1

• I 예컨대 아래 나 콘텐츠의 폭을 사용한 자식의 원치가있을 수 있고, 폭이 상이 할 수
• 을 스크롤을 추가하지 의해 가로 자식 요소를 정렬 상위위한 white-space: nowrap;을 사용한 display:inline-block

.parent { 
 
    border: 1px solid green; 
 
    overflow: auto; /* change to overflow-x: scroll if you want to show scrollar if less elements */ 
 
    padding: 5px; 
 
    white-space: nowrap; 
 
} 
 
.parent > div { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    padding: 5px; 
 
}

<div class='parent'> 
 
    <div>one</div> 
 
    <div>threeeee</div> 
 
    <div>fiveeeeeeeeee</div> 
 
    <div>one</div> 
 
    <div>threeeee</div> 
 
    <div>fiveeeeeeeeee</div> 
 
    <div>one</div> 
 
    <div>threeeee</div> 
 
    <div>fiveeeeeeeeee</div> 
 
    <div>one</div> 
 
    <div>threeeee</div> 
 
    <div>fiveeeeeeeeee</div> 
 
    <div>one</div> 
 
    <div>threeeee</div> 
 
    <div>fiveeeeeeeeee</div> 
 
    <div>one</div> 
 
    <div>threeeee</div> 
 
    <div>fiveeeeeeeeee</div> 
 
</div>