如何让我的徽标左对齐，右链接？

Question

我是 CSS 的新手，正在尝试弄清楚如何将我的徽标放在我的导航链接之上。我希望我的标志在左边，链接在右边。

我刚刚也在这里添加了一些 html！我的徽标也变得非常大，如果没有显示为 flex 并且内容与空格对齐，则它似乎无法工作。

.logo {
    width: 240px;
    height: 120px;
    display: inline-block;
    float: left;
}

.logo:hover{
    transform: scale(1.4) rotate(180deg);
}

.navbar {
    display: inline-block;
    width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 18px;
    align-items:center;
  
}

.nav_links:hover {
   color:#3f8b7b;
   text-decoration: underline;
   font-weight: 600;
}

.nav_links, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

li, a {
    display: inline;
    float: left;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:500;
    margin-left: 24px;
    margin-top: 24px;
    margin-bottom: 36px;
    text-decoration: none;
    color: #191a1a;
}

    <header>
     <div class="hero">
     <div class="container"> 
    <nav class="navbar">
      <div class="logo"><img src="Logo/logo.svg" alt="vic logo"/>
              </div>
        <ul class="nav_links">
            <li class="active"> 
                <a href="index.html" class="nav_links">home</a>
                <li>
                 <a href="stills.html" class="nav_links">stills</a>
                </li>
                <li>
                   <a href="designs.html" class="nav_links">designs</a>
                </li>
            </ul>
            </nav>

I tried to follow along with a couple tutorials but it's not quite working.

Answer 1

我不确定我是否理解将徽标翻转 180º 并按照您的方式缩放它的原因，但一般来说，要在左侧显示您的徽标并在右侧显示导航链接，您可以按照以下步骤操作：

1. 将您的徽标和导航包装到 div 或其他形式的容器中，以便对其进行样式设置。
2. 将容器的显示属性设置为“flex”并将justify-content设置为“space-between”。 （除了使用 flex 之外，还有几种方法可以做到这一点，但这是一个非常简单的解决方案。）这样做通常会将徽标放在左侧，将导航链接放在右侧。
3. 此时，您应该能够从徽标和导航栏中删除 fload 属性，并且您可能可以从导航中删除显示属性；你不需要它，因为我们使用的是 flex。

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 240px;
  height: 120px;
}

.logo:hover {
  transform: scale(1.4) rotate(180deg);
}

.nav_links {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav_links li {
  padding: 0px 20px;
}

li, a {
  display: inline;
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  margin-left: 24px;
  margin-top: 24px;
  margin-bottom: 36px;
  text-decoration: none;
  color: #191a1a;
}

.nav_links:hover a {
  color: #3f8b7b;
  text-decoration: underline;
  font-weight: 600;
}

<div class="header">
  <div class="logo">
    <img src="http://via.placeholder.com/50x50" alt="Your logo">
  </div>
  <ul class="nav_links">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

希望对您有所帮助。如果您遇到任何问题或有任何疑问，请告诉我。