【发布时间】：2017-01-05 16:56:48
【问题描述】：
我是网络开发和堆栈溢出的新手。我第一次建立一个网站，导航栏遇到了一些问题，当浏览器窗口调整大小时，它正在改变它的位置。我在下面提供源代码。我希望导航栏保持在右侧，而不管浏览器大小
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>
（我不想修复导航栏）。请帮忙。
【问题讨论】：
-
请提供最少的代码，（缩小你的代码），但同时尽可能完整。
-
请提供一个工作示例。如果您在问题中运行代码 sn-p，在 chrome、internet explorer 和 microsoft edge 中，当我水平调整大小时，导航栏会停留在页面的右侧，所以我没有看到问题
-
非常抱歉代码太长了。因为这是我在 stackoverflow 中的第一个问题，所以我可能犯了一些错误，因为我还没有探索过这个网站。@YashJain
-
是的，导航栏保持在右侧，但是当我在一定宽度后水平减小浏览器窗口时，导航栏首先从标题下降并出现在图像上（garden.jpg），如果我进一步缩小窗口，只有搜索框和提交按钮留在屏幕上。@Adam0410
标签： html css browser resize sticky