我的模拟网站（OMG！Chrome）存在问题。
如果更改实时预览面板的位置并将其移至屏幕左侧，则会在导航栏下方显示随机间隙。我尝试过很多方法，但是没有用。
这是我的代码：CodePen
HTML 的
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Google Chrome, Google Chromebooks and Google Chromecast news, apps and more" />
<meta name="keywords" content="chrome, chromebooks, chromecast, news, apps, more, updates, information, about" />
<meta http-equiv="author" content="Eduardo Pelaez" />
<title>OMG! Chrome!</title>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700|Lato:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo.png" width="382" height="60" alt="OMG! Chrome! logo" id="logo" />
<div id="navbar-container">
<ul id="navbar-ul">
<a href="index.html"><li id="dchev">Categories</li></a>
<a href="#"><li id="android-nav">Android</li></a>
<a href="#"><li id="dchev">Submit a Tip</li></a>
<a href="#"><li id="dchev">Add</li></a>
</ul>
<form action="http://www.example.com/subscribe.php" method="get">
<input type="search" name="search" placeholder="Search OMG! Chrome!" />
<input type="image" src="images/search.png" />
</form>
</div>
</div>
<div id="content">
<div id="main-section">
<img src="images/main-section.jpg" alt="a banner about five powerful Google Keep features" class="main-section-img" /><!-- .main-section-img is 1053x186px -->
</div>
<div id="col1">
<div id="main-row" class="row">
<div class="column-head">
<a href="#"><h2 class="entry-title">Google Now Coming to Chrome OS App Launcher</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
<p>Google recently announced that Google Now will start appearing in the redesigned Chrome App Launcher. This is one of several changes heading to the Beta version of Chrome OS.</p>
</div>
<div id="main-row-img">
<a href="#"><img src="images/main-row-img.jpg" alt="Screenshot of Google Now in Chrome App Launcher" title="A screenshot of Google Now in the Chrome App Launcher in Chrome OS beta channel" class="article-img" /></a><!-- .article-img is 350x200px -->
<a href="#">News</a>
</div>
</div><!-- end #main-row" -->
<div id="row2" class="row">
<div id="l-article">
<a href="#"><img src="images/main-row-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
<div id="r-article">
<a href="#"><img src="images/article-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
</div>
<div id="row3" class="row">
<div id="l-article">
<a href="#"><img src="images/main-row-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
<div id="r-article">
<a href="#"><img src="images/article-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
</div>
<div id="row4" class="row">
<div id="l-article">
<a href="#"><img src="images/main-row-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
<div id="r-article">
<a href="#"><img src="images/article-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
</div>
<div id="row5" class="row">
<div id="l-article">
<a href="#"><img src="images/main-row-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
<div id="r-article">
<a href="#"><img src="images/article-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
</div>
<div id="row6" class="row">
<div id="l-article">
<a href="#"><img src="images/main-row-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
<div id="r-article">
<a href="#"><img src="images/article-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
</div>
<div id="row7" class="row">
<div id="l-article">
<a href="#"><img src="images/main-row-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
<div id="r-article">
<a href="#"><img src="images/article-img.jpg" class="article-img" /></a>
<a href="#">News</a>
<a href="#"><h2>Install Google's New "Data Saver" Extension for Chrome</h2></a>
<p>By <span class="author">Joey-Elijah Sneddon</span><p>
<p>Thursday</p>
<p>39 Comments</p>
</div>
</div>
<div id="page-nav">
<ul>
<a href="#"><li>1</li></a>
<a href="#"><li>2</li></a>
<a href="#"><li>3</li></a>
<a href="#"><li>4</li></a>
<a href="#"><li>5</li></a>
</ul>
<div id="page-nav-next">
<a href="#">Next</a><!-- make images/right-chevron.png background img positioned right -->
</div>
</div>
</div><!-- end #col1 -->
<div id="col2">
<img src="images/social-img.jpg" width="300" height="100" alt="" id="social-stats" />
<div id="most-read-this-week">
<h2><span class="side-bar-title">Most Read This Week</span></h2>
<ul>
<li><img src="images/most-read-img.jpg" class="mini-thumbnail" /><a href="#">This is Chrome’s Newest Easter Egg. And It’s Awesome</a></li>
<li><img src="images/most-read-img.jpg" class="mini-thumbnail" /><a href="#">This is Chrome’s Newest Easter Egg. And It’s Awesome</a></li>
<li><img src="images/most-read-img.jpg" class="mini-thumbnail" /><a href="#">This is Chrome’s Newest Easter Egg. And It’s Awesome</a></li>
<li><img src="images/most-read-img.jpg" class="mini-thumbnail" /><a href="#">This is Chrome’s Newest Easter Egg. And It’s Awesome</a></li>
<li><img src="images/most-read-img.jpg" class="mini-thumbnail" /><a href="#">This is Chrome’s Newest Easter Egg. And It’s Awesome</a></li>
<li><img src="images/most-read-img.jpg" class="mini-thumbnail" /><a href="#">This is Chrome’s Newest Easter Egg. And It’s Awesome</a></li>
<li><img src="images/most-read-img.jpg" class="mini-thumbnail" /><a href="#">This is Chrome’s Newest Easter Egg. And It’s Awesome</a></li>
</ul>
</div>
<div id="latest-videos">
<h2><span class="side-bar-title">Latest Videos</span></h2>
<div id="latest-videos-thumbnails">
<a href="#"><img src="images/pixel-two-open.jpg" alt="Left open view of Google's lateset Chromebook Pixel 2" class="latest-video-img" /><!-- .latest-video-img is 145x100 -->
Pixel 2</a>
<a href="#"><img src="images/pixel-two-closed.jpg" alt="Right front closed view of Google's latest Chromebook Pixel 2" class="latest-video-img" />
Pixel 2</a>
</div>
</div>
<div id="get-our-apps">
<h2><span class="side-bar-title">Get Our Apps</span></h2>
<div id="get-our-apps-imgs">
<a href="#"><img src="images/google-play-app.jpg" alt="Get this app on Google Play banner" class="banner" /></a><!-- .banner is 257x95 -->
<a href="#"><img src="images/chrome-web-store-extension.jpg" alt="Get this extension on the Chrome Web Store banner" class="banner" /></a>
<a href="#"><img src="images/wp-engine-credit.png" alt="Hosted by WP Engine" width="216" height="55" /></a>
</div>
</div>
</div><!-- end #col2 -->
</div><!-- end #content -->
<div id="footer">
<div id="left-footer">
<div id="footer-row1" class="footer-row">
<h3>Information</h3>
<ul>
<a href="#"><li>Authors</li></a>
<a href="#"><li>Code of Conduct</li></a>
<a href="#"><li>Privacy Policy</li></a>
</ul>
</div>
<div id="footer-row2" class="footer-row">
<h3>Get in Touch</h3>
<ul>
<a href="#"><li>Contact Form</li></a>
<a href="#"><li>Tweet Us</li></a>
<a href="#"><li>Mail Us</li></a>
</ul>
</div>
<div id="footer-row3" class="footer-row">
<h3>Quick Links</h3>
<ul>
<a href="#"><li>Chrome OS News</li></a>
<a href="#"><li>Extensions</li></a>
<a href="#"><li>Web Apps</li></a>
<a href="#"><li>Chromebooks</li></a>
</ul>
</div>
<div id="footer-row4" class="footer-row">
<h3>Other Links</h3>
<ul>
<a href="#"><li>Ohso Website</li></a>
<a href="#"><li>OMG! Ubuntu!</li></a>
</ul>
</div>
</div><!-- end #left-footer -->
<div id="right-footer">
<div id="share">
<a href="#"><img src="images/share.png" alt="Share icon" class="share-icon" /></a>
<a href="#"><img src="images/share.png" alt="Share icon" class="share-icon" /></a>
<a href="#"><img src="images/share.png" alt="Share icon" class="share-icon" /></a>
<a href="#"><img src="images/share.png" alt="Share icon" class="share-icon" /></a>
<a href="#"><img src="images/share.png" alt="Share icon" class="share-icon" /></a>
</div>
<p>© 2015 <a href="#">Ohso Ltd.</a> All rights reserved.</p>
<p><a href="#">OMG! Chrome!</a> is a member of the Ohso Ltd Network.</p>
<p><a href="#">Chrome</a> is a registered trademark of <a href="#">Google Inc.</a></p>
<img src="images/ohso.png" width="125" height="50" alt="Ohso company logo" />
</div>
</div><!-- end #footer -->
</div><!-- end #wrapper -->
</body>
</html>
CSS
body {
width: 100%;
margin: 0 auto;
padding: 0;
font-family: Lato, Ubuntu, 'Helvetica Neue', Helvetica, Arial, sans-serif;}
#wrapper {
height: 100%;}
#content, #footer {
width: 960px;
margin-left: 30px;
margin-right: 30px;}
#logo {
position: relative;
left: 112px;
top: 5px;}
#header {
background-color: #21A4FE;
height: 75px;}
#navbar-ul {
width: 500px;
margin: 0;
padding: 0;
float: left;
position: relative;
left: 65px;
bottom: 2px;}
input[type="search"] {
height: 36px;
float: left;
border: none;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;}
form {
float: right;
position: relative;
right: 78px;
top: 3px;}
#navbar-ul li {
display: inline-block;
float: left;
font-weight: 700;
line-height: 40px;
text-transform: uppercase;
color: white;
font-size: 14px;
margin-right: 28px;
padding-top: 5px;
padding-right: 24px;}
#android-nav {
margin-right: 7px !important;}
#dchev {
background: url("../images/down-chevron.png") no-repeat;
background-position: 92% 56%;}
#navbar-container {
width: 800px;
height: 34px;
float: right;
position: relative;
bottom: 47px;
margin-right: 50px;}
/* end navigation bar */
.main-section-img {
width: 1053px;
height: 186px;}
#main-section {
overflow: hidden;
width: 100%;
height: 186px;}
答案 0 :(得分：0)
您的解决方案位于＃navbar-container中 它的高度使这个跳跃
尝试将高度降低到10px，您会看到横幅设置在正确的位置
答案 1 :(得分：0)
#navbar-container {
width: 800px;
height: 34px;
float: right;
position: relative;
bottom: 47px;
margin-right: 50px;}
我个人使用top，bottom，left和right。当你调整窗口大小时，它们总是搞砸了。请使用保证金来定位您的元素。
如果您使用：
#navbar-container {
width: 800px;
height: 34px;
float: right;
position: relative;
margin-top: 20px;}
那么你将拥有相同的风格/位置，但导航下方没有神秘的空间。