목록 요소 오버플로 함께 가로 배열

Question

나는 ul 상자에 7 리가 있고 각각 20 %의 너비가 있고 따라서 너비가 140 %가되어야 함을 의미합니다 그래서 CSS와 수평 오버 플로우로 이것을 설정해야합니다. 하지만 제 경우에는 4 리만 보여주고 나머지는 스크롤없이 숨겨져 있습니다! 한 줄에 모든 리튬을 표시하는 솔루션은 무엇입니까?

샘플 : http://jsfiddle.net/2DbnS/ 당신은 LI에서 float를 제거하고 다음을 포함하도록 CSS를 업데이트해야

<style> 
#list1 > li { 
list-style-type: none;width:20%; 
height:195px;border:1px solid gray; 
float:left;margin:2px;text-align: center; 
} 
</style> 
<ul style='border:1px solid red;width:90%;height:215px;overflow-x:scroll;overflow-y:hidden;' id=list1> 

<li> 
<b>ocr 1</b><br /> 
</li> 
<li > 
<b>ocr 100</b><br /> 
</li> 
<li > 
<b>ocr 1000</b><br /> 
</li> 
<li > 
<b>ocr 2000</b><br /> 
</li> 
<li > 
<b>ocr 5000</b><br /> 
</li> 
<li > 
<b>ocr 10000</b><br /> 
</li>  
<li > 
<b>ocr 15000</b><br /> 
</li> 
</ul> 

Answer 1

. 이렇게하면 LI 요소가 인라인 요소로 설정되어 서로 이어 지도록 설정하고 UL에 white-space:nowrap;을 설정하면 래핑되지 않도록하고 필요한 오버플로 동작을 만들 수 있습니다. 여기

#list1 { 
     white-space:nowrap; 
    } 
    #list1 > li { 
     display:inline-block; 
     ... 

은 왼쪽으로 모든 상자를 이동하는 UL에서 패딩을 제거하는 등 몇 가지 더 개조하면 되겠 어를 포함하여 JSFiddle의 업데이트입니다.

Answer 2

#list1 { 
    white-space:nowrap; 
    padding:0; 
    border:1px solid red; 
    width:90%; 
    height:215px; 
    overflow:scroll; 
} 
#list1 > li { 
    list-style-type:none; 
    width:20%; 
    height:195px; 
    border:1px solid gray; 
    margin:2px; 
    text-align: center; 
    display:inline-block; 
} 

그리고 20 % 너비 요소 중 7 개가 전체 너비의 140 %를 필요로한다는 것을 의미하지는 않습니다. 요소 패딩, 요소 요소 여백, 경계선 등도 고려해야합니다.