-1
所以,是我创建了导航栏和我的页面徽标,但它们之间有很多空间,我不想那样。徽标和导航栏之间的间距
请帮助我,这里是我的代码:
<!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">
*{
\t margin-bottom: 0px;
\t margin-left: 0px;
\t margin-right: 0px;
\t margin-top: 0px;
\t padding-bottom: 0px;
\t padding-left: 0px;
\t padding-right: 0px;
\t padding-top: 0px;
\t }
body{
\t background:url(future.jpg);
\t position:center;
\t height:100%;
\t width:100%;
\t }
#container{
\t margin-top: 105px;
\t margin-left: 300px;
\t height: 50px;
\t }
.menu{
\t list-style:none;
\t }
.menu li{
\t position:center;
\t float: left;
\t background: rbackground: #ffffff; /* Old browsers */
\t background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
\t 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+ */
\t background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
\t background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
\t background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
\t 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 */
\t font-family: 'Francois One', sans-serif;
\t text-align: center;
\t display: block;
\t height: 50px;
\t width: 150px;
\t line-height: 50px;
\t border-right: 1px solid rgba(51,51,51,1);
\t -webkit-transition: all .3s linear 0s;
\t -moz-transition: all .3s linear 0s;
\t -ms-transition: all .3s linear 0s;
\t -o-transition: all .3s linear 0s;
\t transition: all .3s linear 0s;
\t }
.left{
\t border-top-left-radius:50px;
\t border-bottom-left-radius:50px;
\t }
.right{
\t border-top-right-radius:50px;
\t border-bottom-right-radius:50px;
\t border:0px;
\t }
.menu li:hover{
\t background:background: #ffffff; /* Old browsers */
\t background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
\t background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
\t background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
\t background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e5e5e5 100%); /* Opera 12+ */
\t background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
\t 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); \t \t
}
h1{
\t color: white;
\t font-family: 'Days One', sans-serif;
\t position: center;
\t font-size: 50px;
\t -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-align: center;
\t }
</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>
谢谢,它的工作! – BananaFlow
@BananaFlow请接受我的回答,如果它适合你:) – user5173426