徽标和导航栏之间的间距答案

【问题标题】：Spacing between logo and navigation bar徽标和导航栏之间的间距
【发布时间】：2015-08-16 18:44:52
【问题描述】：

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

现在它看起来像这样：

但我不想在它们之间留出空间：

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

 <!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>

【问题讨论】：

标签： html navigation title spacing

【解决方案1】：

用这个替换你的#container id：

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

【讨论】：

@BananaFlow 如果它对你有用，请接受我的回答:)

【解决方案2】：

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

试试这个

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

别忘了访问my site

【讨论】：