html - 不同尺寸的李

Question

能否请您协助如何制作我的一个 Lis 能否请您协助如何制作我的一个 Lis/p>

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

        </ul>

    </nav>
</div>


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



#pageTop {
    height: 172px;
}


nav {
  margin: 0px auto;
  overflow: scroll;
  width: auto;
  height: 95px;
}

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

nav ul li {
    display: inline-block;
    height: 70px;
    text-align: center;
    float:left;
    overflow: hidden;
}

Answer 1

嗯，我想你可以使用 nth-child此处为 CSS 选择器。

我假设你想要第四个 <li>占用三个正常的宽度<li>元素(在您现有的 CSS 中定义)，所以我们想要的宽度将是:10.66666667% * 3 = 32%。

删除多余的2 <li> HTML 中的元素，并使用 nth-child(4) ，像这样:

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

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