-4
my sad navbar here私はnavbarを水平に表示させることができず、浮動小数点、位置、および表示を混乱させようとしました：inline-block。それはul形式で、ドロップダウンメニューを持つ3つのボタンが中央にあります。私が間違っていることを見てくれてありがとうと私に知らせてください！navbarが水平に表示されませんか？
/* NAVIGATION BAR */
#nav {
width: 1100px;
height: 200px;
float: left;
font-weight: bold;
font-size: 24px;
float: left;
}
# nav button {
display: inline-block;
position: relative;
width: 100%;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%
background-color: white;
color: rgb(36,60,131);
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
display: inline-block;
}
li {
float: left;
}
/* nav bar hover */
li a {
display: inline-block;
color: #000;c
text-align: center;
padding: 8px 16px;
background-color: white;
color: rgb(36,60,131);
text-decoration: none;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
float: left;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
/* changes link color on hover */
li a:hover, .dropdown:hover .dropbtn {
background-color: rgb(36,60,131);
color: white;
}
/* highlights active page on nav bar */
.active {
background-color: rgb(36,60,131);
color: white;
}
li.dropdown {
display: inline-block;
}
/* dropdown menu */
.dropbtn {
display: inline-block;
background-color: white;
text-align: center;
padding: 8px 16px;
color: rgb(36,60,131);
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-decoration: none;
font-size: 24px;
border: none;
font-weight: bold;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(36,60,131);
color: white;
min-width: 160px;
}
.dropdown-content a {
padding: 8px 16px;
background-color: white;
color: rgb(36,60,131);
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: rgb(36,60,131);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
and my HTML is here
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/saferide.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<div id="nav">
<ul>
<li style="float:left"><a href="index.html">home</a></li>
<div class="dropdown">
<button class="dropbtn">about us</button>
<div class="dropdown-content">
<a href="history.html">safe ride history</a>
<a href="#">meet our dispatchers</a>
<a href="#">core staff</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">how we operate</button>
<div class="dropdown-content">
<a href="#">rules & policies</a>
<a href="#">how to schedule a ride</a>
<a href="#">safe ride boundaries</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">get involved</button>
<div class="dropdown-content">
<a href="#">volunteer or intern</a>
<a href="#">resources</a>
</div>
</div>
<li><a href="contact.html">contact us</a></li>
</ul>
</div>