楽しみのためにウェブサイトを作成していて、ナビゲーションバーを中央に配置したいのですが、何も機能していないようです。ナビゲーションバーを全幅に広げたいのですが、中央に「ボタン」があります。また、レスポンシブであるため、css(navbar li)を追加してみました:margin-left:50%。しかし、これは私が探しているものではありません。margin-left:autoとmargin-right:autoも機能しません。display:inline-blockとtext-align:center;を使用してみました。しかし、それは機能しません。何か提案はありますか?
.navbar {
position: relative;
margin-top: -47px;
}
.navbar ul {
width: 99%;
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
}
.navbar li {}
.navbar li a {
float: left;
color: white;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.dropdown-content {
display: none;
position: absolute;
margin-top: 47px;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
<div class="navbar">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown"><a href="bewegingillusie.html">Plans</a>
<div class="dropdown-content">
<a href="about_us.html">Route</a>
<a href="about_the_website.html">Places I want to go</a>
<a href="about_the_website.html">My budget</a>
</div>
</li>
<li class="dropdown"><a href="fotoillusie.html">Journey</a>
<div class="dropdown-content">
<a href="about_us.html">South-Africa</a>
<a href="about_the_website.html">Thailand</a>
<a href="about_the_website.html">Country1</a>
<a href="about_the_website.html">Country2</a>
<a href="about_the_website.html">Country3</a>
<a href="about_the_website.html">Country4</a>
</div>
</li>
<li><a href="kleurillusie.html">Photos</a></li>
<li><a href="vormillusie.html">Other websites</a></li>
<li class="dropdown"><a href="about.html">About</a></li>
</ul>
</div>
設定display: flex;
してみました<ul>
か?次に、を追加できるはずjustify-content: center;
です。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加