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;
}

我正在尝试将徽标向左移动而不影响我的导航项目向右，我在将导航项目向右移到图像上方时遇到了很多麻烦，我无法同时实现两者他们中的正确位置。

我如何使其工作？

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;是对您的版本的必要更改）

Answer 2

这是我的解决方法：

.logo{
padding-right: 0;
  opacity: 1;
}
.logo img{
  opacity: 0;
}
.logo::after{
  content: "";
  width: 50px;
  height: 54px;
  opacity: 0.99;
  position: absolute;
  top: 10px;
  left: 10px;
  background: url("https://user94.files.wordpress.com/2009/12/ubuntu-logo.png") no-repeat;
  background-size: 100% 100%;
}

Answer 3

在导航栏中，您应该使用flex-direction: row。这是一个有用的链接flexbox basic navigation - menu items and logo

body{
  margin:0;
}

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;
}

.header-content {
  margin-top: 2em;
}


header a,
header a:visited {
  color: rgb(252, 252, 252);
  text-decoration: none;
  padding-bottom: 0.1em;
}

header a:hover {
  color: #FA26BF;
  
}

.logo{
padding-right: 0;
}

.logo img{
  
  vertical-align: bottom;
}

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;
}

nav a {
  margin: 1em;

}

nav a,
nav a:visited {
  padding-bottom: 0.1em;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: rgb(252, 252, 252);
}

nav a:hover,
nav a:active {
  color: #FA26BF;
}

<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>

导航栏中的徽标位置

3 个答案: