ヘッダーを広くするにはどうすればよいですか？

Question

3つのliを使用している私のウェブページのヘッダーを設計しましたが、私のメニューは見た目が良くなるために少し広くする必要があります。今、私のコードは次のようである：

header { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    z-index: 10; 
 
    animation-name: dropHeader; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease; 
 
    animation-duration: 0.75s 
 
} 
 

 
header ul { 
 
    display: inline-block; 
 
    background: #fff; 
 
    text-align: center; 
 
    padding: 10px; 
 
    margin: 0; 
 
    border-bottom-right-radius: 4px; 
 
    border-bottom-left-radius: 4px 
 
}

<header> 
 
    <div id="mobile-menu-close"> 
 
     <span>Close</span> <i class="fa fa-times" aria-hidden="true"></i> 
 
    </div> 
 
    <!-- Not sure if to menu or not --> 
 

 
    <ul id="menu" class="shadow"> 
 
     <li> 
 
      <a href="#about">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#projects">Projects</a> 
 
     </li> 
 
     <li> 
 
      <a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
</header>

私はそれは、異なる解像度間で台無しにすることなく、Webページの「コーナー」に到達するために取得する方法を見つけ出すように見えることはできません。

Answer 1

これを実現するには、flex cssを使用できます。

header { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    z-index: 10; 
 
    animation-name: dropHeader; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease; 
 
    animation-duration: 0.75s 
 
} 
 

 
header ul { 
 
    display: flex; 
 
    background: #fff; 
 
    text-align: center; 
 
    padding: 10px; 
 
    margin: 0; 
 
    border-bottom-right-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
    justify-content: space-around; 
 
    list-style: none; 
 
}

<header> 
 
    <div id="mobile-menu-close"> 
 
     <span>Close</span> <i class="fa fa-times" aria-hidden="true"></i> 
 
    </div> 
 
    <!-- Not sure if to menu or not --> 
 

 
    <ul id="menu" class="shadow"> 
 
     <li> 
 
      <a href="#about">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#projects">Projects</a> 
 
     </li> 
 
     <li> 
 
      <a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
</header>

また、フルスクリーンに収まるように justify-content: space-between;を使用することができます。これがあなたを助けることを願っています。

Answer 2

試してみてください...
これは、大画面と小画面の両方で使用できます。

ここで変更されたCSSコードがある...

/*start css*/ 
header { 
    background-color: #fff; 
    display: block; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    z-index: 10; 
    animation-name: dropHeader; 
    animation-iteration-count: 1; 
    animation-timing-function: ease; 
    animation-duration: 0.75s; 
} 

header ul { 
    display: block; 
    background-color: #fff; 
    text-align: center; 
    padding: 20px 0 0 0; 
    margin: 0; 
} 

header li { 
    list-style: none; 
    transition: .5s; 
} 

header li a { 
    text-transform: uppercase; 
    display: block; 
    text-decoration: none; 
    border: 2px solid #fff; 
    padding: 30px; 
    margin: 0; 
} 
header li:hover { 
    background-color: rgba(0, 0, 0, 0.1); 
} 
/*end css*/ 

HTMLコード変化なし...

<!--start html--> 
<header> 
<div id="mobile-menu-close"> 
    <span>Close</span> <i class="fa fa-times" aria-hidden="true"></i> 
</div> 
<!-- Not sure if to menu or not --> 

<ul id="menu" class="shadow"> 
    <li> 
     <a href="#about">About</a> 
    </li> 
    <li> 
     <a href="#projects">Projects</a> 
    </li> 
    <li> 
     <a href="#contact">Contact</a> 
    </li> 
</ul> 
</header> 
<!--end html--> 

あなたは残りの必要な変更を行うことができます。
この回答があなたの質問を満たしてくれることを願っています。