зависимости ширины от ширины других элементов в CSS

Question

HTML:

<div> 
<ul> 
    <li>ITEM</li> 
    <li>CONTACT</li> 
    <li><input type="text" placeholder="Zoeken..."></li> 
    <li><img alt="shopCart" id="shopCart" href="image.jpg"></img></li> 
</ul> 
</div> 

CSS:

ul{ 
    height: 125px; 
    width: 60%; 
    margin: 0 auto; 
} 

li{ 
    list-style-type: none; 
    float: left; 
    padding: 20px 20px; 
    margin: 31px 0; 
    -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */ 
    -moz-box-sizing: border-box; /* Firefox ≤ 28 */ 
     box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */ 
} 

Теперь я хочу, чтобы ширина li:nth-last-child(2) зависеть от ширины других элементов. Как и ul, например, 1000px в ширину, первый, второй и последний li вместе 300px witdth, я тогда хочу, чтобы мой nth-last-child(2) был шириной 700 пикселей.

Поэтому в основном я хочу, чтобы мои li:nth-last-child(2) быть 60% - (ширина другой Ли)

Edit:
width: calc(60% - 700px); бы возможность, но я, как я могу узнать ширину всех остальных Ли ?

JS возможно слишком

Answer 1

Это может быть сделано в CSS:

ul{ 
    height: 125px; 
    width: 60%; 
    margin: 0 auto; 
    display:table; 

} 

li{ 
    display:table-cell; 
    list-style-type: none; 
    padding: 20px 20px; 
    margin: 31px 0; 
    -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */ 
    -moz-box-sizing: border-box; /* Firefox ≤ 28 */ 
     box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */ 
} 

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

Последний бит является важной частью. Он сообщает, что 3-й предмет занимает как можно больше места.