CSSを使用したフッタレイアウト

Question

私のフッタのスタイリングには問題があり、何か指導が必要です。名前は左側に、右側にはリンクがあります。リンクは私の上で崩壊しており、より効果的にそれらをまとめて整列させるより良い方法があるのだろうかと思います。私はここでは限られた成功でflexboxを使用しようとしていました。事前にあなたの助けをありがとう。

/* footer styles*/ 
 

 
footer { margin-top:1em; display: block; border-top: solid 2px #456e6e; 
 
margin-bottom: 1em; } 
 

 
top { 
 

 
float: right; 
 
text-decoration:none; 
 
color: #456e6e; 
 
margin-top: -2.25em; 
 
} 
 

 
top:hover{ 
 

 
color:black; 
 
} 
 

 
footer a { text-decoration: none; color: #456e6e; } 
 

 
footer a:hover{ color:black; } 
 

 
wrapper { 
 

 
min-height: 100vh; 
 
} 
 

 
/*NAV CSS*/ 
 

 
.tablet-info { 
 

 
display: none; 
 
} for small screen sizes 
 

 
for larger screen sizes 
 

 
.tablet-info { 
 

 
display: inline-block; 
 
float: right; 
 
margin-top: -2em; 
 
margin-right:.25em; 
 
margin-left:.25em; 
 
} 
 

 
student-name { 
 

 
margin-top: 1.8em; 
 
} 
 

 
.clearfix { content: ""; display: table; clear: both; } 
 

 
}

<div id="footer"> 
 
     <footer class="clearfix"> 
 
      <h3 id="student-name">Tracy Excell</h3> 
 
       <h3><a href="#home" id="top">Back To Top</a></h3> 
 
       <h3><a href="#home" class="tablet-info">Home</a></h3> 
 
       <h3><a href="#portfolio" class="tablet-info">Portfolio</a></h3> 
 
       <h3><a href="#contact" class="tablet-info">Contact</a></h3> 
 

 
     </footer> 
 
</div>

Answer 1

あなたは、更新フッターのレイアウトを使用して、以下に示すようにフレキシボックスを使用することができます。

footer{ 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
footer .nav{ 
 
    display: flex; 
 
} 
 

 
.nav h3{ 
 
    margin-left: 15px; 
 
}

<footer> 
 
    <h3 id="student-name">Tracy Excell</h3> 
 
    <div class="nav"> 
 
    <h3><a href="#home" id="top">Back To Top</a></h3> 
 
    <h3><a href="#home" class="tablet-info">Home</a></h3> 
 
    <h3><a href="#portfolio" class="tablet-info">Portfolio</a></h3> 
 
    <h3><a href="#contact" class="tablet-info">Contact</a></h3> 
 
    </div> 
 
</footer>

Answer 2

同じライン上でそれらを保つために同じタグに名前とリンクを張って下さい。 「& nbsp;」を使用できます。別の名前とリンクに。

新しい見出しを作成するたびに、常に新しい行から開始されます。