Header 导航位置

Question

所以，我一直在为我的学校做一个项目，我想出了健身的想法（不重要）。我设置了徽标，当我开始实际导航时，我 .. idk .. 所以我希望我的导航在右侧对齐，但我尝试的所有内容都没有改变位置。有人帮忙吗？这是实际代码

HTML

        <header>
        <div class="logo">
            <img src="./img/fit-logo.png" alt="logo" width="120" height="120">
        </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="index-about-us.html">About us</a></li>
                    <li><a href="index-trainings.html">Trainings</a></li>
                    <li><a href="index-news.html">News</a></li>
                    <li><a href="index-contact-us.html">Contact Us</a></li>
                </ul>
            </nav>
    </header>

CSS

*{
margin:0;
padding:0;
border:0;
}

::selection {
    background-color: lightcoral;
}

body {
    background-color: gray;
    width:100%;
    height:100%;
}

.flex {
    display:flex;
}

.logo {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    pointer-events: none;
    margin: 0 110px;
    float:left;
}

nav {
    align-items: center;
    justify-content: space-between;
}

Answer 1

据我了解你的问题，你需要像这样导航。正确的？

为此，您需要了解 flexbox。您可以参考这篇文章了解基本的 flexbox 知识。

CSS Flexbox from W3Schools.

这是您的导航代码。

HTML

<header>
  <nav>
    <ul>
      <li class="logo"> <img src="./img/fit-logo.png" alt="logo" width="120" height="120"></li>
      <li><a href="#">Home</a></li>
      <li><a href="index-about-us.html">About us</a></li>
      <li><a href="index-trainings.html">Trainings</a></li>
      <li><a href="index-news.html">News</a></li>
      <li><a href="index-contact-us.html">Contact Us</a></li>
    </ul>
  </nav>
</header>

CSS

*{
margin:0;
padding:0;
border:0;
}
ul{
  list-style-type: none;
  display: flex;
  justify-content: right;
  background-color: #1F1D36;
}

.logo{
  flex:1;
}

li{
  float: left;
}

li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  color: white;
  font-family: Poppins;
}

Answer 2

您可以使用导航项内联显示。

*{
margin:0;
padding:0;
border:0;
}

::selection {
    background-color: lightcoral;
}

body {
    background-color: gray;
    width:100%;
    height:100%;
}

.flex {
    display:flex;
}

.logo {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    pointer-events: none;
    margin: 10px;
    float:left;
}

nav {
    align-items: center;
    justify-content: space-between;
}
nav ul li {
      display: inline;
      padding:10px;
      float:right
}

<header>
        <div class="logo">
            <img src="./img/fit-logo.png" alt="logo" width="120" height="120">
        </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="index-about-us.html">About us</a></li>
                    <li><a href="index-trainings.html">Trainings</a></li>
                    <li><a href="index-news.html">News</a></li>
                    <li><a href="index-contact-us.html">Contact Us</a></li>
                </ul>
            </nav>
    </header>

Header 导航位置

Header navigation position

html

css

navigation

header