我是网络开发和堆栈溢出的新手。我是第一次建立一个网站,并面对导航栏的一些问题,当浏览器窗口调整大小时,它正在改变它的位置。我提供下面的源代码。我希望导航栏坚持到右边而不管它是什么浏览器尺寸
body
{
font-family:Arial, Helvetica, sans-serif ;
font-size: 14;
margin:0px;
padding:0px;
line-height:1.5em;
color:black;
}
#header
{
height:150px;
width:100%;
background-color:#ff0000;
}
.container
{
width:90%;
margin:auto;
margin-top:15px;
margin-bottom:15px;
}
#image
{
display:block;
width:100%;
height:350px;
}
.head2
{
width:50%;
margin:auto;
margin-top:25px;
margin-bottom:25px;
text-align:center;
color:#6F0A21;
}
.sidebar
{
width:250px;
height:150px;
padding:5px;
margin-right:10px;
margin-bottom:10px;
background-color:lightgray;
float:left;
clear:left;
}
.main_content
{
margin-left:265px;
margin-bottom:10px;
border:1px solid orange;
height:300px;
}
#footer
{
width:100%;
height:150px;
background-color:#ff0000;
margin-top:10px;
clear:both;
}
#header #logo
{
position:relative;
margin:0;
top: 50%;
transform: translateY(-50%);
margin-left:5%;
}
#header #navbar
{
list-style:none;
position:relative;
display:inline-block;
float:right;
top: 50%;
transform: translateY(-50%);
margin-right:5%;
//min-width:643.891px;
}
#header #navbar li
{
display:inline;
margin-left:20px;
margin-right:0px;
}
#header form
{
display:inline;
margin-right:0px;
}
#navbar a
{
text-decoration:none;
font-size:20px;
color:white;
}
#searchbox
{
height:18px;
margin-bottom:1.5px;
width:200px;
}
#submit_button
{
height:25px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>My Web Page</title>
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<meta charset="utf-8"/>
<meta name="description" content="This website is developed by Soumik Banerjee"/>
<meta name="keywords" content="Home, About, news, Contact"/>
<link rel="stylesheet" href="webpage.css"/>
</head>
<body>
<div id="header">
<a href="index.html">
<img id="logo" src=logo.png alt="logo"/>
</a>
<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contents</a></li>
<li><a href="#">Contact Us</a></li>
<li id="form">
<form action="">
<input id="searchbox" type="text" name="Serching" placeholder="Search"/>
<input id="submit_button" type="submit" value="Go"/>
</form>
</li>
</ul>
</div>
<div class="container">
<img id="image" src="garden.jpg" alt="garden.jpg"/>
<h2 class="head2">Welcome to My Website</h2>
<div class="sidebar">
</div>
<div class="sidebar">
</div>
<div class="sidebar">
</div>
<div class="sidebar">
</div>
<div class="main_content">
</div>
<div class="main_content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
(我不想让导航栏固定)。请帮助。