これらのナビゲーションリンクを均等に広げて、ページの中央に配置しようとしています。ulをページの中央に配置することができましたが、リンクを中央に配置する方法がわかりません。
変更する必要があるのはliの何かだと思いますが、何がわからないのです。
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
width: 50%;
}
li {
float: left;
padding-left: 50px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: red;
text-decoration: underline;
}<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>フレックスを使用してみてください。リストスタイルや背景色など、他にも必要なものを追加することもできます。このリンクファムを見てください、それはあなたの人生を変えるでしょう。
ul {
display: flex;
flex-direction: row;
justify-content: center;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加