HTML에서 하위 요소의 줄 바꿈을 방지 할 수 있습니까?

Question

.container 
{ 
position: absolute; 
bottom: 0px; 
height: 25px; 
left: 200px; 
padding-right: 5px; 
background-color: black; 
overflow: hidden; 
} 


.child 
{ 
position: relative; 
float: left; 
height: 100%; 
width: 95px; 
background-color: #99CCFF; 
margin-left: 5px; 
} 

브라우저 창의 크기가 모든 자식이 래핑되지 않고 맞출 수있을 때보 다 작 으면 나는 스크롤 바가되고 싶습니다. 자식 요소 래핑의 기본 메커니즘이 아닙니다.

컨테이너의 너비를 설정할 수 없어 하위 요소 수를 제어 할 수 없습니다. 하위 요소의 줄 바꿈을 방지하려면 어떻게해야합니까?

Answer 1

포장을 원하지 않는 경우에는 포장용으로 특별히 제작 된 수레를 사용하면 안됩니다.

overflow:auto 및 white-space:nowrap 인 부모 컨테이너와 display:inline 또는 inline-block 인 하위 컨테이너를 사용하십시오.

Answer 2

간단한 HTML 및 CSS에서는 실제로 가능하지 않습니다. 자식 요소의 수를 알지 못하면 자식 요소의 수와 총 너비에 따라 JavaScript를 사용하여 동적으로 최소 너비를 설정하는 것이 유일한 방법입니다.

Answer 3

모든 칠레의 부모 홀더()를 추가 할 수 있습니다. 그런 다음 해당 div의 overflow : auto를 사용하십시오. 그래도 작동하지 않는다면 div와 height에 self.innerHeight와 self.innerWidth (javascript를 통해)를 사용하십시오.