如何将导航链接到右边的同时，将文本放在徽标旁边？

Question

这是CSS的新手，我一直在从事一个练习项目，但无法做标题所说的。

我尝试了我在许多视频中看到的边缘权利：自动方法，它起作用，但它仅以标题为中心。

这是一些代码：

.logo {
  cursor: pointer;
  margin-right: auto;
  margin-left: 1.5rem;
  height: 3rem;
  width: auto;
}

.title {
  text-transform: capitalize;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-right: auto;
}

header {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav_links {
  list-style: none;
}

.nav_links li {
  display: inline-block;
  padding: 0 1.5rem 0 1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2rem;
}

<header>
  <img class="logo" src="./Images/ic-logo.svg" alt="logo">
  <div class="title">
    <span class="title1">COLMAR</span>
    <span class="title2">ACADEMY</span>
  </div>
  <nav>
    <ul class="nav_links">
      <li><a href="#">On Campus</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">For companies</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>

我试图将标题移到徽标旁边，同时将导航栏链接到右侧。

任何帮助/指针都非常感谢。

Answer 1

这样做：

1. 标题不应具有合理性：flex-end;
2. 徽标不需要rain> rain-right：auto。标题具有保证权利：auto;

阅读内联注释。

.logo {
  cursor: pointer;
  /*  NEW */
  /* margin-right: auto; */
  margin-left: 1.5rem;
  height: 3rem;
  width: auto;
}

.title {
  text-transform: capitalize;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-right: auto;
}

header {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 4rem;
  display: flex;
  /*  NEW */
  /* justify-content: flex-end;  */
  align-items: center;
}

.nav_links {
  list-style: none;
}

.nav_links li {
  display: inline-block;
  padding: 0 1.5rem 0 1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2rem;
}

<header>
  <img class="logo" src="./Images/ic-logo.svg" alt="logo">
  <div class="title">
    <span class="title1">COLMAR</span>
    <span class="title2">ACADEMY</span>
  </div>
  <nav>
    <ul class="nav_links">
      <li><a href="#">On Campus</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">For companies</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>

Answer 2

不确定您在这里要做什么，图纸或表示形式将特别有用。但是我有两种可以用来解决此问题的方法。

1. 使用Flex-Box：

制作一个将弹性盒像这样包裹徽标的弹性盒：

 <div style="display: flex; flex-direction: row;">
      <img class="logo" src="./Images/ic-logo.svg"alt="logo">
      <div class="title">
           <span class="title1">COLMAR</span>
           <span class="title2">ACADEMY</span>
      </div>
 </div>

并使用导航栏做同样的事情：）

2. 只需从徽标中删除保证金权利，它似乎可以在浏览器中工作。

Answer 3

使用您的HTML结构，您可以使用下面的CSS完成此操作。我剥离了您的样式，因此您只能看到完成您要求的准确的需要的内容。

header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  flex-shrink: 1;
  margin-right: 8px;
}

.title {
  flex-grow: 1;
}

.nav_links {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.nav_links li {
  margin-left: 8px;
}

<header>
  <img class="logo" src="./Images/ic-logo.svg" alt="logo">
  <div class="title">
    <span class="title1">COLMAR</span>
    <span class="title2">ACADEMY</span>
  </div>
  <nav>
    <ul class="nav_links">
      <li><a href="#">On Campus</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">For companies</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>