不同Li尺寸

Question

您能帮我做一个我的Lis能否请你帮助我做一个我的LisCould你能帮助我如何做一个我的Lis能否请我帮助一个我的Lis之一

HTML：

<div id="pageTop"> 
    <nav>
        <ul>
            <li><a href=""><img src="images/header.png" alt="" /><br/>Home</a></li>
            <li><a href=""><img src="images/header.png" alt="" /><br/>Home</a></li>
            <li><a href=""><img src="images/header.png" alt="" /><br/>Home</a></li>
            <li></li>          
            <li></li>
            <li></li>
            <li><a href=""><img src="images/header.png" alt="" /><br/>Home</a></li>
            <li><a href=""><img src="images/header.png" alt="" /><br/>Home</a></li>
            <li><a href=""><img src="images/header.png" alt="" /><br/>Home</a></li>        
        </ul>
    </nav>
</div>

CSS：

body {
    margin: 0px;
    background-repeat: no-repeat;
}



#pageTop {
    height: 172px;
    border: 1px red dashed;
}


nav {
  background-color: #fff;
  margin: 0px auto;
  overflow: scroll;
  width: auto;
  height: 95px;
  background: #ddd;
}

nav ul {
    margin: 0px auto;
    overflow: scroll;
}

nav ul li {
    display: inline-block;

}

Answer 1

嗯，我想您可以在这里使用nth-child CSS选择器。

我假设您希望第四个<li>占用三个常规<li>元素的宽度（在您现有的CSS中定义），所以我们想要的宽度将是：10.66666667％* 3 = 32％。

删除HTML中多余的2个<li>元素，并使用nth-child(4)，如下所示：

nav ul > li:nth-child(4){
    width: 32%;
}

现在，第四个<li>元素将是其他元素的宽度的三倍。这是JSFiddle，向您展示这实现了什么。 （我设置了临时的背景色，以便您可以看到第四个。）如果有任何疑问，请告诉我！