html - 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，然后我希望我的 nth-last-child(2) 宽度为 700px。

所以基本上我希望我的 li:nth-last-child(2) 为 60%-(其他 li 的宽度)

编辑:
width: calc(60% - 700px); 是一种可能性，但我如何找出所有其他 li 的宽度？

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%;
}

最后一点是重要的部分。它告诉第三个元素占用尽可能多的空间。