html
  • navigation
  • title
  • spacing
  • 2015-08-16 86 views -1 likes 
    -1

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

    现在它看起来是这样的: enter image description here

    但我不它们之间想空间: enter image description here

    请帮助我,这里是我的代码:

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

    回答

    1

    替换您的#container ID与此:

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

    谢谢,它的工作! – BananaFlow

    +1

    @BananaFlow请接受我的回答,如果它适合你:) – user5173426

    0

    这是因为你设置top margin105px

    试试这个

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

    不要忘了参观my site

    相关问题