HTML CSS - How to right justify the last 3 items of the menu?-CodePudding

I'm making a menu. I want to justify the last 3 items of the menu to the right.

I want to do as in this picture:

I was able to do it like this:

I could not justify the items written Item 1, Item 2 and Item 3 to the right. How can I do that? Thank you in advance for your help.

body {
    font-family: Poppins;
    background-color: #F5F6F6;
}

.navbar ul {
    display: flex;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.top-space {
    height: 25px;
}

.navbar ul li {
    display: inline;
    margin-left: 30px;
}

.navbar ul li:first-child {
    margin-left: 0px;
}

.navbar ul li a {
    text-decoration: none;
    line-height: 50px;
    color: #979797;
}

.navbar ul li a:hover {
    color: #222429;
}

.navbar ul li img {
    height: 50px;
}

.navbar ul li .dropbtn {
    color: #979797;
    line-height: 50px;
    font-size: 16px;
    border: none;
}

.navbar ul li .dropdown .dropdown-content {
    display: none;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.navbar ul li .dropdown .dropdown-content a {
    color: black;
    padding: 0px 12px;
    text-decoration: none;
    display: block;
    margin-left: 0px;
}

.navbar ul li .dropdown .dropdown-content a:hover {
    background-color: #ddd;
}

.navbar ul li .dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: #222429;
}

.arrow {
    border: solid #979797;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-left: 6px;
}

.arrow:hover {
    border: solid #222429;
    border-width: 0 3px 3px 0;
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.down:hover {
    transform: rotate(224deg);
    -webkit-transform: rotate(224deg);
}

.navbar ul li a:last-child(3) {
    float: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/style.css">
</head>

<body>
    <div >
        <div ></div>
        <div >
            <ul>
                <li>
                    <a href=""><img src="./img/logo.png"> </a>
                </li>
                <li><a href="">Vectors</a></li>
                <li><a href="">Photos</a></li>
                <li><a href="">PSD</a></li>
                <li><a href="">Video</a></li>
                <li>
                    <div >
                        <button >More <i ></i></button>
                        <div >
                            <a href="#">Item 1</a>
                            <a href="#">Item 2</a>
                            <a href="#">Item 3</a>
                        </div>
                    </div>
                </li>
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

CodePudding user response：

Add this rule:

.navbar > ul > li:nth-last-child(3) {
    margin-left: auto;
}

By applying margin-left: auto; it determines that the third-last li and all following flex items are moved as far right as possible inside the flex container.

(note: You have to switch to "full page" view here in the snippet window to see the result properly)

body {
    font-family: Poppins;
    background-color: #F5F6F6;
}

.navbar ul {
    display: flex;
    justify-content: space-between;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.top-space {
    height: 25px;
}


.navbar ul li {
    display: inline;
    margin-left: 30px;
}

.navbar ul li:first-child {
    margin-left: 0px;
}

.navbar ul li a {
    text-decoration: none;
    line-height: 50px;
    color: #979797;
}

.navbar ul li a:hover {
    color: #222429;
}

.navbar ul li img {
    height: 50px;
}

.navbar ul li .dropbtn {
    color: #979797;
    line-height: 50px;
    font-size: 16px;
    border: none;
}

.navbar ul li .dropdown .dropdown-content {
    display: none;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.navbar ul li .dropdown .dropdown-content a {
    color: black;
    padding: 0px 12px;
    text-decoration: none;
    display: block;
    margin-left: 0px;
}

.navbar ul li .dropdown .dropdown-content a:hover {
    background-color: #ddd;
}

.navbar ul li .dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: #222429;
}

.arrow {
    border: solid #979797;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-left: 6px;
}

.arrow:hover {
    border: solid #222429;
    border-width: 0 3px 3px 0;
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.down:hover {
    transform: rotate(224deg);
    -webkit-transform: rotate(224deg);
}

.navbar > ul > li:nth-last-child(3) {
    margin-left: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/style.css">
</head>

<body>
    <div >
        <div ></div>
        <div >
            <ul>
                <li>
                    <a href=""><img src="./img/logo.png"> </a>
                </li>
                <li><a href="">Vectors</a></li>
                <li><a href="">Photos</a></li>
                <li><a href="">PSD</a></li>
                <li><a href="">Video</a></li>
                <li>
                    <div >
                        <button >More <i ></i></button>
                        <div >
                            <a href="#">Item 1</a>
                            <a href="#">Item 2</a>
                            <a href="#">Item 3</a>
                        </div>
                    </div>
                </li>
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a></li>
            </ul>
        </div>
    </div>
</body>

</html>