CSS - плавающие LIs - и заполнение пробелов между

Question

У меня есть неупорядоченный список, который у меня есть все элементы par, последний поплыл влево - и последний плавал вправо. Как пример здесь: 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

Последний элемент должен быть второй до последнего, перед де широким элементом. Также необходим широкий элемент: блок и ширина: авто.

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, чтобы он работал там. В конце концов, вы, конечно, можете использовать класс, как в своем вопросе.

Demo

Try before buy