CSS - 플로팅 LI - 사이에 공백 넣기

Question

나는 왼쪽으로 떠있는 마지막 항목과 마지막으로 떠 다니는 항목이 모두있는 정렬되지 않은 목록이 있습니다. 예와 같이 여기에 : http://jsfiddle.net/AkwnJ/.

LI # 9 (회색)은 8 번째 항목과 10 번째 항목 사이의 공백을 채우기위한 것입니다. 그러나 나는 이것을 어떻게하는지 모른다. 누군가 어떻게 내게 알려줄 수 있었 을까? 나는이 예를 따르려고 시도했다 : http://jsfiddle.net/bYmM4/7/ 이것은 여기에서 가져 갔다 : Filling space between floating elements. 그러나이 예에서는 DIV를 사용하는 반면 UL은 너무 약간 다릅니다. 그러나 확실하게 동일한 원칙이 적용됩니까?

여기 누군가가 큰 이익을 얻길 바랍니다.

당신이 jsFiddle에 갈 필요 저장하려면 내 HTML과 CSS는 다음과 같다 :

HTML :

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li class="fill"><div>9</div></li> 
    <li class="end">10</li> 
</ul> 

CSS :

html, body{ 
    margin: 0; 
    padding: 0; 
} 

ul { 
    padding: 0; 
    margin: 0; 
} 

li { 
    text-align: center; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    float: left; 
    border: black 1px solid; 
} 

li.end { 
    float: right; 
} 

li.fill { 
    overflow: hidden; 
} 

li.fill div { 
    background-color: gray; 
    height: 100%; 
    width: 100% 

    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

감사합니다!

편집 : 약간의 코드가 삭제되었습니다. 대신 부동 요소의

Answer 1

마지막 요소는 바로 드 넓은 요소 전에 마지막으로 초해야한다. 또한 넓은 요소에는 display : block 및 width : auto가 필요합니다.

http://jsfiddle.net/HkChk/

li.fill { 
    overflow: hidden; 
    float: none; 
    position: relative; 
    width: auto; 
    display: block; 
} 

Answer 2

이 같은 CSS 테이블을 사용

ul { 
    display: table; 
    width: 100%; 
} 

li { 
    display: table-cell; 
    width: 30px; 
    min-width: 30px; 
    height: 30px; 
} 

li:nth-last-child(2) { 
    width: 100%; 
    min-width: 30px; 
} 

참고로 : :nth-last-child(2) 마지막 요소는 다음 스타일을 것입니다. 이것을 사용하면이 특정 요소에 추가 클래스를 추가 할 필요가 없습니다. 이것은 IE8에서는 작동하지 않지만 Selectivizr을 사용하여이 기능을 사용할 수도 있습니다. 결국에는 질문 에서처럼 수업을 대신 사용할 수 있습니다.

데모

Try before buy