我正在制作一个网站。我的浮动元素不能正常工作。但这不是唯一的事情，当我添加float：left元素时，导航栏就会消失。我需要将导航栏浮动到左侧。
HTML代码：
body {
font-family: 'Open-sans', sans-serif, Helvetica;
text-align: center;
box-sizing: border-box;
}
#main_navbar {
text-align: center;
margin: 0 auto;
float: right;
position: absolute;
top: 35px;
right: 20px;
}
#main_navbar li {
list-style-type: none;
display: inline-block;
min-width: 5em;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
text-align: center;
overflow: hidden;
color: #68cedd;
}
.dropdown {
position: relative;
}
.dropdown:active {
color: #32673f;
}
.dropdown-content {
display: none;
min-width: 200px;
right: 50%;
transform: translate(50%,0);
position: absolute;
padding: 10px 0;
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
display: block;
font-weight: normal;
}
.dropdown:hover .dropdown-content {
display: block;
background-color: #f9f9f9;
}
#image_symbol {
width: 10em;
margin: 0 auto;
}
header {
height: 95px;
width: 100%;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
}
#main_navbar li a.active, ul#main_navbar li a:hover {
color: #32673f;
}
#navbar {
position: relative;
float: left;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Cycle - Home</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<header>
<div id="heading">
<img src="http://i.imgsafe.org/79ba3b5.png" id="image_symbol"></img>
<h2 style="position: relative; top: -100px; left: 120px">MY CYCLE</h2>
</div>
<div id="navbar">
<ul id="main_navbar">
<li>
<a href="#" style="z-index: -1" class="active">Home</a>
</li>
<li class="dropdown">
<a class="dropbtn" style="z-index: -1">Rent</a>
<div class="dropdown-content">
<a href="rental/mountain_bikes.html">Mountain Bikes</a>
<a href="rental/hybrid_bikes.html">Hybrid Bikes</a>
<a href="rental/road_bikes.html">Road Bikes</a>
<a href="rental/city_bikes.html">City Bikes</a>
</div>
</li>
<li>
<a href="faq.html" style="z-index: -1">FAQ's</a>
</li>
<li>
<a href="about.html" style="z-index: -1">About</a>
</li>
</ul>
</div>
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>
提前谢谢。
答案 0 :(得分：2)
如果删除绝对位置，则可以：
body {
font-family: 'Open-sans', sans-serif, Helvetica;
text-align: center;
box-sizing: border-box;
}
#main_navbar {
/* REMOVE THIS ELEMENT */
/*position: absolute;*/
text-align: center;
margin: 0 auto;
float: right;
top: 35px;
right: 20px;
}
#main_navbar li {
list-style-type: none;
display: inline-block;
min-width: 5em;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
text-align: center;
overflow: hidden;
color: #68cedd;
}
.dropdown {
position: relative;
}
.dropdown:active {
color: #32673f;
}
.dropdown-content {
display: none;
min-width: 200px;
right: 50%;
transform: translate(50%,0);
position: absolute;
padding: 10px 0;
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
display: block;
font-weight: normal;
}
.dropdown:hover .dropdown-content {
display: block;
background-color: #f9f9f9;
}
#image_symbol {
width: 10em;
margin: 0 auto;
}
header {
height: 95px;
width: 100%;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
}
#main_navbar li a.active, ul#main_navbar li a:hover {
color: #32673f;
}
#navbar {
position: relative;
float: left;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Cycle - Home</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<header>
<div id="heading">
<img src="http://i.imgsafe.org/79ba3b5.png" id="image_symbol"></img>
<h2 style="position: relative; top: -100px; left: 120px">MY CYCLE</h2>
</div>
<div id="navbar">
<ul id="main_navbar">
<li>
<a href="#" style="z-index: -1" class="active">Home</a>
</li>
<li class="dropdown">
<a class="dropbtn" style="z-index: -1">Rent</a>
<div class="dropdown-content">
<a href="rental/mountain_bikes.html">Mountain Bikes</a>
<a href="rental/hybrid_bikes.html">Hybrid Bikes</a>
<a href="rental/road_bikes.html">Road Bikes</a>
<a href="rental/city_bikes.html">City Bikes</a>
</div>
</li>
<li>
<a href="faq.html" style="z-index: -1">FAQ's</a>
</li>
<li>
<a href="about.html" style="z-index: -1">About</a>
</li>
</ul>
</div>
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>