divをWebページ上の固定ナビゲーションバーにフォーマットするにはどうすればよいですか？

Question

私はウェブページの下部に留まっている固定されたナビゲーションバーを作ろうとしており、正しいコードが何であるか疑問に思っています。

私は以下を試みました。 CSSファイルと、「ボタン・ナビゲーションバー」のフォーマットで次のようにフォーマットされた「固定」クラスで は、クラスのようにフォーマット：

div.fixed { 
 
     position: fixed; 
 
     bottom: 0; 
 
     right: 0; 
 
} 
 
     
 
.button-navbar { 
 
     background-color: white; 
 
     border: 2px solid #ffb90f; 
 
     width: 90px; 
 
     height: 40px; 
 
     color: black; 
 
     display: table-cell; 
 
     margin: 15px; 
 
     vertical-align: middle; 
 
     text-align: center; 
 
     text-decoration: none; 
 
     border-radius: 8px; 
 
     line-height: 30px; 
 
     font-size: 20px; 
 
     font-family: 'Roboto', sans-serif; 
 
     -webkit-transition-duration: 0.4s; /* Safari */ 
 
     -webkit-transition: 0.4s; /*Safari*/ 
 
     transition: 0.4s; 
 
     transition-duration: 0.4s; 
 
}

<div class="fixed"> 
 
    <a href="homepage.php" class="button-navbar">Back to dashboard</a> <br> 
 
    <a href="IntroductionQuiz.php" class="button-navbar"> Retake Quiz</a> 
 
</div>

Answer 1

<br>を削除し、変更display: table-cell;からdisplay: inline-block;

div.fixedを全角にしたい場合は、left: 0;が必要です。これはボタンを中央に配置します。

div.fixed { 
 
     position: fixed; 
 
     bottom: 0; 
 
     right: 0;} 
 

 
.button-navbar { 
 
     background-color: white; 
 
     border: 2px solid #ffb90f; 
 
     width: 90px; 
 
     height: 40px; 
 
     color: black; 
 
     display: inline-block; 
 
     margin: 15px; 
 
     vertical-align: middle; 
 
     text-align: center; 
 
     text-decoration: none; 
 
     border-radius: 8px; 
 
     line-height: 30px; 
 
     font-size: 20px; 
 
     font-family: 'Roboto', sans-serif; 
 
     -webkit-transition-duration: 0.4s; /* Safari */ 
 
     -webkit-transition: 0.4s; /*Safari*/ 
 
     transition: 0.4s; 
 
     transition-duration: 0.4s;

<div class="fixed"> 
 
    <a href="homepage.php" class="button-navbar">Back to dashboard</a> 
 
    <a href="IntroductionQuiz.php" class="button-navbar"> Retake Quiz</a> 
 
</div>