Different Li Sizes

Question

Could you please assist with how to make one of my Lis Could you please assist with how to make one of my LisCould you please assist with how to make one of my LisCould you please assist with how to make one of my Lis

<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

Hmmm, I think you could make use of the nth-child CSS selector here.

I assume you want the fourth <li> to take up the width of three normal <li> elements (as defined in your existing CSS), so the width we want will be: 10.66666667% * 3 = 32%.

Delete the extra 2 <li> elements in your HTML, and use nth-child(4), like so:

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

Now, the fourth <li> element will be three times the width of the other ones. Here's a JSFiddle to show you what this achieves. (I set a temporary background colour so you can see the fourth one.) If you have any questions, let me know!