ナビゲーションバーのサイズを変更するには

Question

私が見たすべての質問は、WordPressまたはBootstrap（これは何ですか？）のナビゲーションバーを参照して、私はCSSを使用して私のものを作っています。

モバイルユーザーが正しいリンクをクリックするのが簡単になるように、ナビゲーションバーを大きくしたいと考えています。私はheight: px;を使ってみましたが、そのすべてが下のテキストをさらに押し下げていました。

ボタン自体のサイズを変更するにはどうすればよいですか？私のCSSは以下の通りです。

html{background:gray;} 
 
ul { 
 
    left: 0; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    display: inline-block; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    margin: 0 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="/AboutUs.html">About</a> 
 
    </li> 
 
    <li><a href="/ContactUs.html">Contact</a> 
 
    </li> 
 

 
</ul>

Answer 1

あなたがfont-sizeプロパティを使用することができ、テキスト自体を大きくするためにしようとしている場合。

Answer 2

^{は、私はナビゲーションバーを表示するために背景を追加した、とあなたはあなたのコード内ulとli要素を使用してOKです}

生産で必要とされていませんのでご注意ください。 navbarが「より大きく」表示されるようにするには、ul要素のheightと子要素liの両方を設定する必要があります。以下に簡単なデモを掲載しました。

ul要素の高さは100pxですが、この値は好みに合わせて変更できます。これに合わせてa要素のline-heightプロパティを変更することもできます。

html,body { 
 
    background: gray; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
ul { 
 
    left: 0; 
 
    top: 50%; 
 
    text-align: center; 
 
    display: block; 
 
    list-style-type: none; 
 
    background: dimgray; 
 
    height: 100px;  /*   <-- change this line*/ 
 
} 
 
li { 
 
    display: inline-block; 
 
    height: 100%; 
 
} 
 
li a { 
 
    display: inline-block; 
 
    color: white; 
 
    background: lightgray; 
 
    line-height: 100px; /*   <-- change this line*/ 
 
    text-align: center; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    text-decoration: none; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="/AboutUs.html">About</a> 
 
    </li> 
 
    <li><a href="/ContactUs.html">Contact</a> 
 
    </li> 
 

 
</ul>

Answer 3

私は、ボタン自身のサイズを変更するために何を使うのですか？

パディングを追加してください！見てみましょう。

body {background-color: gray;} 
 

 
ul { 
 
    left: 0; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    display: inline-block; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 2em; /* bigger button? add more padding! */ 
 
    text-decoration: none; 
 
    margin: 0 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="/AboutUs.html">About</a> 
 
    </li> 
 
    <li><a href="/ContactUs.html">Contact</a> 
 
    </li> 
 

 
</ul>

リンクのサイズを大きくするために多くの方法があります。これは単なる1つの方法です。 jbutlerの答えも良い方法です。それはちょうどあなたがそれがしたいと思うものに依存します。

これが役に立ちます。