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％ - （其他李的宽度）

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

最后一点是重要的部分。它告诉第3项占用尽可能多的空间。

CSS中其他元素宽度的相关宽度

1 个答案: