>

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

이 구조가 있습니다 :

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


  • 답변 # 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>

  • 이전 javascript - 타임 스탬프를 지속적으로 비교
  • 다음 R의 데이터 프레임에서 몇 개의 열을 선택할 수 있습니까?