홈>2020-02-01 00:41

html - 탐색 모음 위치의 로고

이 문제에 대해 많은 질문이 있다는 것을 알고 있습니다. 몇 가지를 시도했지만 그다지 운이 없었습니다.

이 구조가 있습니다 :

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

htmlcsscss3flexbox

답변 # 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; 버전의 필수 변경 사항입니다.)

답변 # 2
내 솔루션은 다음과 같습니다.
```
align-items: baseline;
```

답변 # 3

탐색 모음에서 .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%; } 를 사용해야합니다 . 유용한 링크 flexbox 기본 탐색-메뉴 항목 및 로고

flex-direction: row

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>

Python2.net

html - 탐색 모음 위치의 로고

관련 자료