html - Logo在导航栏定位

Question

我知道有很多关于此的问题，我已经尝试了其中一些，但我没有那么幸运。

我有这样的结构:

HTML:

<header>
    <div class="logo">
          <a><img style="height: 50px;" src="https://user94.files.wordpress.com/2009/12/ubuntu-logo.png"></a>
       </div>
  <div class="header-content"> 
    <nav> 
      <a href="#section-one">About me</a>
      <a href="#section-two">Education</a>
      <a href="#section-three">Personal life</a>
      <a href="#section-four">My work</a>
      <a href="#section-five">Contact me</a>
    </nav>
  </div>
</header>

CSS:

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;

  align-items: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  width: 100%;
  background: url(http://via.placeholder.com/1920x1080) no-repeat 10% 10% / cover;
}

.header-content {
  margin-top: 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;;
  justify-content: center;
  align-items: center;
  text-align: center;
}



.logo{
padding-right: 0; 
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  font-weight: 400;
  color: rgb(49, 41, 61);
  font-size: .8em;
  margin-top: 2em;
    margin-left: 30em;
}

我试图将 Logo 向左移动而不影响我向右的导航项，我很难将导航项移到右侧和图像上方，我不知道如何同时进行他们的定位正确。

我怎样才能让它发挥作用？

https://codepen.io/anon/pen/zLMzpO

Answer 1

这个 header 的 CSS 应该做你想做的:

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-height: 100vh;
  background: url(http://via.placeholder.com/1920x1080) no-repeat 10% 10% / cover;
}

https://codepen.io/anon/pen/YjRQRV

(没有 column 方向，justify-content: space-between; 和 align-items: baseline; 是你的基本改变版本)