导航栏不会位于左侧

问题描述 投票：0回答：1

我尝试制作一个导航栏，其中菜单项应位于右侧，徽标位于左侧。但这似乎是不可能的。无论我如何尝试，元素都不会按照我想要的方向移动。我的代码有什么问题吗？有人可以帮助我吗？

我用浮动来实现：对，那不起作用。 如果我尝试使用 display:flex 修复它，这些项目将保留在标题的底部。徽标也是如此。 Logo应该更靠右边，但它不想移动。 我的 HTML 有问题吗？

:root {
  --background: #D9E4EF;
  --header: #62ABF5;
  --header2: #1062B3;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Arimo", sans-serif;
}

body {
  background-color: var(--background);
  height: 100vh;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px 10%;
  z-index: 100;
  background: var(--header);
}

.menu-nav {
  color: var(--background);
  display: flex;
  justify-content: end;
  align-items: center;
  text-decoration: none;
}

.menu-nav_item {
  text-decoration: none;
  margin-left: 35px;
}

a {
  text-decoration: none;
}

li:hover {
  color: var(--header2);
}

.logo {
  width: 70px;
  margin: 0;
}
<body>

  <header>
    <div class="logo">
      <a href="index.html"><img src="meb_logo.png" alt="Logo"></a>
    </div>
    <nav class="nav">
      <ul class="menu-nav">
        <li class="menu-nav_item active">
          <a href="index.html" class="menu-nav_link">
        Home
    </a>
        </li>
        <li class="menu-nav_item">
          <a href="about.html" class="menu-nav_link">
        Duyurlar
    </a>
        </li>
        <li class="menu-nav_item">
          <a href="projects.html" class="menu-nav_link">
        Projeler
    </a>
        </li>
        <li class="menu-nav_item">
          <a href="contacts.html" class="menu-nav_link">
        Iletisim
    </a>
        </li>
      </ul>
    </nav>
    </span>
    </div>
  </header>
  </body>

css navbar
1个回答
0
投票

只需在 

header

上使用 Flex 
 display: flex;
 justify-content: space-between;
 align-items: center;

这是代码

 :root {
            --background: #D9E4EF;
            --header: #62ABF5;
            --header2: #1062B3;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: "Arimo", sans-serif;
        }

        body {
            background-color: var(--background);
            height: 100vh;
        }

        header {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            padding: 20px 10%;
            z-index: 100;
            background: var(--header);
            /*new code*/
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*new code end*/
        }

        .menu-nav {
            color: var(--background);
            display: flex;
            justify-content: end;
            align-items: center;
            text-decoration: none;
        }

        .menu-nav_item {
            text-decoration: none;
            margin-left: 35px;
        }

        a {
            text-decoration: none;
        }

        li:hover {
            color: var(--header2);
        }

        .logo {
            width: 70px;
            margin: 0;
        }
<body> 
    <header>
        <div class="logo">
            <a href="index.html"><img src="meb_logo.png" alt="Logo"></a>
        </div>
        <nav class="nav">
            <ul class="menu-nav">
                <li class="menu-nav_item active">
                    <a href="index.html" class="menu-nav_link">
                        Home
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="about.html" class="menu-nav_link">
                        Duyurlar
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="projects.html" class="menu-nav_link">
                        Projeler
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="contacts.html" class="menu-nav_link">
                        Iletisim
                    </a>
                </li>
            </ul>
        </nav>
        </span>
        </div>
    </header>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.