徽标和导航栏之间的间距

Question

是的，我已经创建了导航栏和我的页面徽标，但是它们之间有很多 space，我不想那样。

现在看起来像这样：

但我不想 space 他们之间:

请帮助我，这是我的代码：

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MENU BAR</title>
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<style type="text/css">
*{
 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 }
body{
 background:url(future.jpg);
 position:center;
 height:100%;
 width:100%;
 }
#container{
 margin-top: 105px;
 margin-left: 300px;
 height: 50px;
 }
.menu{
 list-style:none;
 }
.menu li{
 position:center;
 float: left;
 background: rbackground: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
 font-family: 'Francois One', sans-serif;
 text-align: center;
 display: block;
 height: 50px;
 width: 150px;
 line-height: 50px;
 border-right: 1px solid rgba(51,51,51,1);
 -webkit-transition: all .3s linear 0s;
 -moz-transition: all .3s linear 0s;
 -ms-transition: all .3s linear 0s;
 -o-transition: all .3s linear 0s;
 transition: all .3s linear 0s;
 }
.left{
 border-top-left-radius:50px;
 border-bottom-left-radius:50px;
 }
.right{
 border-top-right-radius:50px;
 border-bottom-right-radius:50px;
 border:0px;
 }
.menu li:hover{
 background:background: #ffffff; /* Old browsers */
 background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
 background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
 background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5e5e5 100%); /* Opera 12+ */
 background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
 background: radial-gradient(ellipse at center,  #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   color:rgba(0,0,51,1);  
}
h1{
 color: white;
 font-family: 'Days One', sans-serif;
 position: center;
 font-size: 50px;
 -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
   text-align: center;
 }
</style>
</head>
<body onResize="resize();">
<h1>DRAGONSHOP.LT</h1>
<div id="container">
<ul class="menu">
<li class="left">PRADŽIA</li>
<li>APIE MUS</li>
<li>KAIP UŽSISAKYTI</li>
<li>PRISTATYMAS</li>
<li class="right">KONTAKTAI</li>
</ul>
</div>
</body>
</html>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<html>
<head>

Answer 1

将您的 #container id 替换为：

#container
   {
    margin-top: 105px;
    margin-left: 300px;
    height: 50px;
    position: relative;
    bottom: 90px;
    }

Answer 2

这是因为您将top margin设置为105px

试试这个

#container{
    margin-top: 11px;
    margin-left: 300px;
    height: 50px;
}

别忘了访问my site

徽标和导航栏之间的间距

Spacing between logo and navigation bar

html

navigation

title

spacing