요소가 화면에서 수평으로 떠 다니는 것을 허용

Question

나는 여기 피클에 조금있다. 나는 <li> 같은 요소 집합을 가지고있다. <ul>. Here's a demo. 내 목표는 요소가 페이지 오른쪽에서 넘칠 수 있도록 허용하는 것이며 나중에 자바 스크립트를 통해 순환시킵니다. 어떤 이유로 든 나는 그것을 시도해도 다른 요소들을 내리지 않습니다. 내가 시도 :

float:left; 

display:inline-block; 

디스플레이의 모든 맛 실제로, 또한 시도 나는 또한 사업부의 목록을 설정하고 말도 안되는 픽셀 폭으로 폭을 설정하고 제대로 가장자리를 밀어 바라고 시도 clear:both;하지만, 그것은 아무것도하지 않았다.

아이디어가 있으십니까?

저는 자바 스크립트 솔루션을 피하려고 노력하고 싶지만 모든 것이 환영합니다.

참고 : 결국이 jQuery를 너무

Answer 1

당신은 당신의 리튬 폭 대신에 20 %의 고정 폭을해야

을 말할 때 20 %의 폭이 ​​각 <li> 화면 폭에 걸쳐하고있는 이동 더 있다는 것입니다, 만약 당신이 그것을 퍼센트로 가지고 있다면 컨테이너가 얼마나 큰지는 중요하지 않습니다. 리는 항상 그 너비의 20 %가 될 것입니다. 또한

나는 보통

.bodynavs{ 
    width:200px; 
    min-height:100px; 
    border:1px solid green; 
} 

#slideimages{ 
    list-style-type:none; 
    padding:0; 
    margin:0; 
    overflow:hidden; 
    width: 2000%; 
} 

Answer 2

당신을 jsbin 사용하지 않는 리튬 컨테이너가이 링크가 작동이

http://jsbin.com/eyemaf/1/edit 희망처럼 리튬의

뭔가를 포함하도록 충분히 큰 폭을 가지고 있는지 확인 white-space CSS 속성을 변경하려고합니다.

white-space: nowrap; 

이렇게하면 원하는대로 화면을 벗어나 목록 요소를 모두 한 줄에 표시하고 필요에 따라 스크롤 할 수 있습니다.