ナビゲーションバーは移動しません

Question

私はヘッダーの右側にナビゲーションを行おうとしています。私はそれを自分の名前（Jae Hong）に合わせたいと思います。ここに私のHTML

.banner { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    background-color: #fff; 
 
    height: 90px; 
 
} 
 

 
.banner h1 { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    width: 170px; 
 
    font-size: 30px; 
 
    margin-left: 100px; 
 
    letter-spacing: 0.2em; 
 
    color: #000; 
 
} 
 

 
nav ul { 
 
    display: block; 
 
    text-align: right; 
 
    list-style-type: none;

<div class="banner"> 
 
    <h1> Jae Hong</h1> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#website" class="active"><b><u>Home</b></u></a></li> 
 
     <li><a href="#resume">Resume</a></li> 
 
     <li><a href="#work">Work</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>

ナビゲーションバナーボックスの一番下にある理由

わからないです

Answer 1

何h1

.banner { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    background-color: #fff; 
 
    height: 90px; 
 
} 
 

 
.banner h1 { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    width: 170px; 
 
    font-size: 30px; 
 
    margin-left: 100px; 
 
    letter-spacing: 0.2em; 
 
    color: #000; 
 
    position: absolute; 
 
} 
 

 
nav ul { 
 
    display: block; 
 
    text-align: right; 
 
    list-style-type: none; 
 
}

<div class="banner"> 
 
    <h1> Jae Hong</h1> 
 
    <nav> 
 
    <ul> 
 
     <li> 
 
      <a href="#website" class="active"> 
 
      <!-- here was something wrong --> 
 
      <!-- with opening/closing tags --> 
 
       <b> 
 
        <u>Home</u> 
 
       </b> 
 
      </a> 
 
     </li> 
 
     <li><a href="#resume">Resume</a></li> 
 
     <li><a href="#work">Work</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>

に position: absolute;の追加について

Answer 2

h1とulの要素がデフォルトで両方ともblock要素であるため、これは親コンテナの幅の100％を占めるため、これが発生しています。そういうわけで、別の行であなたのナビを見ているのです。

ulをdisplay: inlineに変更してから、float: rightを追加して、コンテナの最後にプッシュします。次に、をh1要素に追加して、左側に押します。

.banner { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    background-color: #fff; 
 
    height: 90px; 
 
} 
 

 
.banner h1 { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    width: 170px; 
 
    font-size: 30px; 
 
    margin-left: 100px; 
 
    letter-spacing: 0.2em; 
 
    color: #000; 
 
    float: left; 
 
} 
 

 
nav ul { 
 
    text-align: right; 
 
    list-style-type: none; 
 
    display: inline; 
 
    float: right; 
 
}

<div class="banner"> 
 
    <h1> Jae Hong</h1> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#website" class="active"><b><u>Home</b></u></a></li> 
 
     <li><a href="#resume">Resume</a></li> 
 
     <li><a href="#work">Work</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>

これは単なる1例です。もう1つの選択肢は、ヘッダーにdisplay: flexを使用し、それに従ってコンテンツを調整することです。

Answer 3

.banner { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    background-color: #fff; 
 
    height: 90px; 
 
    display: inline-block; 
 
} 
 

 
.banner h1 { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    width: 170px; 
 
    font-size: 30px; 
 
    margin-left: 100px; 
 
    letter-spacing: 0.2em; 
 
    color: #000; 
 
    
 
} 
 

 
    nav{ 
 

 
display: inline-block; 
 
} 
 

 
    nav ul li { 
 
    display: inline; 
 
    text-align: right; 
 
    list-style-type: none;

<div class="banner"> 
 
<h1> Jae Hong</h1> 
 
</div> 
 

 
    <nav> 
 
    <ul> 
 
     <li><a href="#website" class="active"><b><u>Home</b></u></a></li> 
 
     <li><a href="#resume">Resume</a></li> 
 
     <li><a href="#work">Work</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
    </nav>

このコードをチェックしてください。あなたはあなたのバナーdivの中にナビを持っています。 h1タグとnavタグもブロック要素です。より明確な説明が必要な場合はお知らせください。

そしてFYIブートストラップをチェックしてください。それは習得が容易で、慣れてしまうと時間の節約になります。 W3schoolsには初心者のチュートリアルがあります。私はw3schoolsを試して、ドキュメントに進むことをお勧めします。

Answer 4

これはflexboxを使用して実現できます。下記のコードを参照してください（コード内のコメントを読む）。また、「Flexbox」についてさらに読むことができます。

.banner { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    background-color: #fff; 
 
    height: 90px; 
 
    display: flex;;/**Added**/ 
 
    align-items: center;;/**Added**/ 
 
    flex-wrap: wrap;/**Added**/ 
 
} 
 

 
.banner h1 { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    width: 170px; 
 
    font-size: 30px; 
 
    margin-left: 100px; 
 
    letter-spacing: 0.2em; 
 
    color: #000; 
 
} 
 
/**Added**/ 
 
nav { 
 
    flex-grow: 1; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
nav ul { 
 
    display: block; 
 
    text-align: right;/**You can remove if you like**/ 
 
    list-style-type: none; 
 
    }

<div class="banner"> 
 
    <h1> Jae Hong</h1> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#website" class="active"><b><u>Home</b></u></a></li> 
 
     <li><a href="#resume">Resume</a></li> 
 
     <li><a href="#work">Work</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>