Question

请问如何让我的Lis与其他人的尺寸不同？我需要七个Lis分散我已经完成的％，但是第四个Li是不同的大小。如果你查看我当前的代码，那就是我想要的样子，但是我有9个。

感谢Heaps，感谢任何帮助！

HTML ：

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

CSS ：

body {
    margin: 0px;
    background: url(../images/beach.jpg),url(../images/theheart.jpg);
    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;
    height: 70px;
    width: 10.666666667%;
    text-align: center;
    background: #ddd;
    float:left;
    padding:15px 0px;
    list-style:none;
    min-width: 95px;
    font-family:Helvetica;
    font-size: 10pt;
    overflow: hidden;
}

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来向您展示这实现了什么。（我设置了一个临时背景颜色，你可以看到第四个。）如果您有任何疑问，请告诉我！

不同的李尺寸

1 个答案: