CODEWITHSUNDEEP
htmlcss
ChangMo
ChangMo

Reputation: 1

I want the items in the navbar to be evenly horizontal. #HTML #CSS

.navbar__logo {
    background-color: #770ef7;
}

.navbar-inner {
    background-color: #111;
    position: relative;
    display: flex;
    flex: 1;
    padding: 0;
    text-decoration: none;
    justify-content: space-between
}

.navbar__logo svg {
    display: block;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: auto;
    fill: white;
}

.navbar {
    display: flex;
    height: 73px;
    text-decoration: none;
}

.navbar__menu {
    display: flex;
    list-style: none;
    justify-content:space-around
}
새소식, 뉴비가이드, 다운로드, 게임가이드, 헬프데스크.
I want to arrange these items evenly horizontally.

<!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">
    <link rel="stylesheet" href="style.css"/>
    <title>Document</title>
</head>
<body>
    <div id="app">
    <nav class="navbar">
        <div class="navbar-inner">
        <div class="navbar__logo">
            <a href="/" aria-current="page" class="navbar-logo router-link-exact-active router-link-active" draggable="false">
                <svg xmlns="http://www.w3.org/2000/svg" width="370" height="326" viewBox="0 0 370.4 326.3">
                    <path d="M53.8 3.6c-20.8 0-36.4 0-51.9 0 0-1 0-2 0.1-2.9 37.6 0 75.3 0 112.9 0 0 0.9 0 1.8 0.1 2.8 -9.2 0-18.5 0-30.3 0 0 7.7 0 13.8 0 19.9 0 79.6 0.3 159.2-0.1 238.8C84.3 310.2 48.5 336.6 0 322.6c8-1.1 13.6-1.8 20.8-2.8 0.3-5.2 0.8-10.2 0.8-15.3 0-75.9 0-151.8-0.2-227.7C21.3 49.7 27.2 25.2 53.8 3.6z"></path>
                    <path d="M191.2 88.6c-5.4 9.3-9.1 16-12.9 22.6 -1.1-0.5-2.3-1-3.4-1.5C188.8 74.7 202.6 39.9 218.5 0c44.3 109.8 87 215.3 130 321.7 7.4 0.5 14.6 1 21.9 1.5 0 0.7 0 1.4 0 2.1 -37.6 0-75.2 0-112.8 0 -0.1-0.6-0.1-1.2-0.2-1.8 7.9-0.5 15.8-0.9 26.1-1.5C252.7 244.3 222.5 167.7 191.2 88.6z"></path>
                    <path d="M65.9 322c22.8-9.5 28.5-27.9 35.5-45.7 7.3-18.6 13.7-38 23.8-55.1 16.9-28.8 48.4-39.1 83.4-28.6 -22.1 11.1-27.9 31.5-34.5 51.5 -3.6 11.1-7.5 22-12.1 32.7C144.8 317.5 114 332.8 65.9 322z"></path>
                    <path d="M221.5 238.5c0 31.7 0 58.1 0 85.9 -29.3 0-58.1 0-91.4 0C171.5 306.5 199.2 278 221.5 238.5z"></path>
                </svg>
            </a>
            </div>
    <ul class="navbar__menu">
        <li><a href="">새 소식</a></li>
        <li><a href="">다운로드</a></li>
        <li><a href="">게임 가이드</a></li>
        <li><a href="">갤러리</a></li>
        <li><a href="">헬프데스크</a></li>
    </ul>
</div>
</div>
</div>
</body>
</html>

I want the items in the navbar to be evenly horizontal. I think I still lack understanding of ailgnits and justify content. I would appreciate it if you could give me a tip for this Korean beginner. Everyone, be careful of COVID-19.

Upvotes: 0

Views: 47

Answers (1)

PsiKai
PsiKai

Reputation: 1978

You were very close.

All you need is to add justify-content: space-evenly; to your .navbar-menu and then then give it a flex-basis: 100% since you already had display: flex on it.

To get the menu items closer to the logo, you just have to remember that you ul is given a left-side padding of 40px from the user agent stylesheet. I removed the padding from the ul and there is no longer a large space in between those items.

As a cosmetic change (and for my own OCD), I added align-items: center to the menu items to get them vertically aligned in the nav.

Also, you forgot your closing nav tag, so that may have been causing issues.

.navbar__logo {
    background-color: #770ef7;
}

.navbar-inner {
    background-color: #111;
    position: relative;
    display: flex;
    flex: 1;
    padding: 0;
    text-decoration: none;
    justify-content: space-between
}

.navbar__logo svg {
    display: block;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: auto;
    fill: white;
}

.navbar {
    display: flex;
    height: 73px;
    text-decoration: none;
}

.navbar__menu {
    padding: 0;
    display: flex;
    list-style: none;
    justify-content: space-evenly;
    align-items: center;
    flex-basis: 100%;
}
<!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">
    <link rel="stylesheet" href="style.css"/>
    <title>Document</title>
</head>
<body>
    <div id="app">
    <nav class="navbar">
        <div class="navbar-inner">
        <div class="navbar__logo">
            <a href="/" aria-current="page" class="navbar-logo router-link-exact-active router-link-active" draggable="false">
                <svg xmlns="http://www.w3.org/2000/svg" width="370" height="326" viewBox="0 0 370.4 326.3">
                    <path d="M53.8 3.6c-20.8 0-36.4 0-51.9 0 0-1 0-2 0.1-2.9 37.6 0 75.3 0 112.9 0 0 0.9 0 1.8 0.1 2.8 -9.2 0-18.5 0-30.3 0 0 7.7 0 13.8 0 19.9 0 79.6 0.3 159.2-0.1 238.8C84.3 310.2 48.5 336.6 0 322.6c8-1.1 13.6-1.8 20.8-2.8 0.3-5.2 0.8-10.2 0.8-15.3 0-75.9 0-151.8-0.2-227.7C21.3 49.7 27.2 25.2 53.8 3.6z"></path>
                    <path d="M191.2 88.6c-5.4 9.3-9.1 16-12.9 22.6 -1.1-0.5-2.3-1-3.4-1.5C188.8 74.7 202.6 39.9 218.5 0c44.3 109.8 87 215.3 130 321.7 7.4 0.5 14.6 1 21.9 1.5 0 0.7 0 1.4 0 2.1 -37.6 0-75.2 0-112.8 0 -0.1-0.6-0.1-1.2-0.2-1.8 7.9-0.5 15.8-0.9 26.1-1.5C252.7 244.3 222.5 167.7 191.2 88.6z"></path>
                    <path d="M65.9 322c22.8-9.5 28.5-27.9 35.5-45.7 7.3-18.6 13.7-38 23.8-55.1 16.9-28.8 48.4-39.1 83.4-28.6 -22.1 11.1-27.9 31.5-34.5 51.5 -3.6 11.1-7.5 22-12.1 32.7C144.8 317.5 114 332.8 65.9 322z"></path>
                    <path d="M221.5 238.5c0 31.7 0 58.1 0 85.9 -29.3 0-58.1 0-91.4 0C171.5 306.5 199.2 278 221.5 238.5z"></path>
                </svg>
            </a>
            </div>
    <ul class="navbar__menu">
        <li><a href="">새 소식</a></li>
        <li><a href="">다운로드</a></li>
        <li><a href="">게임 가이드</a></li>
        <li><a href="">갤러리</a></li>
        <li><a href="">헬프데스크</a></li>
    </ul>
</div>
</nav>
</div>
</body>
</html>

Upvotes: 2

Related Questions