将 Logo 和 Company 捕捉到左侧，将导航栏捕捉到右侧答案

【问题标题】：snapping Logo and Company to the left and nav-bar to the right将 Logo 和 Company 捕捉到左侧，将导航栏捕捉到右侧
【发布时间】：2020-07-09 05:26:16
【问题描述】：

我正在为登录页面设计标题和导航栏。我的目标是将公司名称 - <h1> 放在徽标 -<img> 旁边。但是，我需要将导航栏撞到右边。导航栏还需要响应页面的宽度。我已经包含了我正在尝试做的事情的基本图片。我的目标是将来能够用几乎任何图像或名称替换徽标和公司名称。整个头部需要固定在顶部。

这是我的 CSS 和 HTML

* {
  box-sizing: border-box;
  font-size: 10px;
  margin: 0px;
  padding: 0px;
}

h1 {
  font-size: 3rem;
}

#header-img {
  height: 3rem;
}

#nav-link {
  list-style-type: none;
}

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

nav > ul {
  display: flex;
  justify-content: space-around;
}

#nav-bar {
  width: 35vw;
}

<header id="header">
    <img 
    id="header-img" 
    src="https://w0.pngwave.com/png/91/429/web-development-html-css3-the-ohana-code-logo-2cpaper-projection-shaded-1660937-html-dropdown-js-png-clip-art.png" 
    alt="">
    <h1>Company Name</h1>
    <nav id="nav-bar">
        <ul>
            <li id="nav-link"><a href="#nav-link1">Nav Link 1</a></li>
            <li id="nav-link"><a href="#nav-link2">Nav Link 2</a></li>
            <li id="nav-link"><a href="#nav-link2">Nav Link 3</a></li>
        </ul>
    </nav>
</header>

【问题讨论】：

标签： html css header

【解决方案1】：

将徽标 - <img> 和公司名称 - <h1> 嵌套到它自己的 div 中，并使用 display: flex; 使它们水平对齐。

* {
  box-sizing: border-box;
  font-size: 10px;
  margin: 0px;
  padding: 0px;
}

h1 {
  font-size: 3rem;
}

#header-img {
  height: 3rem;
}

#logo-companyname {
  display: flex;
}

#nav-link {
  list-style-type: none;
}

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

nav > ul {
  display: flex;
  justify-content: space-around;
}

#nav-bar {
  width: 35vw;
}

<header id="header">
  
  <div id="logo-companyname">
    <img id="header-img" src="https://w0.pngwave.com/png/91/429/web-development-html-css3-the-ohana-code-logo-2cpaper-projection-shaded-1660937-html-dropdown-js-png-clip-art.png" alt="">
    <h1>Company Name</h1>
  </div>
      
    <nav id="nav-bar">
        <ul>
            <li id="nav-link"><a href="#nav-link1">Nav Link 1</a></li>
            <li id="nav-link"><a href="#nav-link2">Nav Link 2</a></li>
            <li id="nav-link"><a href="#nav-link2">Nav Link 3</a></li>
        </ul>
    </nav>
</header>

【讨论】：