頂部菜單中的可用空間，因爲它被刪除？

在頂部菜單中，「我的報價...」全部顯示爲空閒空間，因爲它的清潔完全填滿了整個頂部？頂部菜單中的可用空間，因爲它被刪除？

HTML

 <ul class="topPanel"> 
     <li><h2>My Quotes</h2></li> 
     <li><h2>LOGIN WITH 
      <a href="#" class="underline">EMAIL</a> 
      OR 
      <a href="#" class="underline">TWITTER</a> 
      </h2> 
     </li> 
    </ul>

CSS

<!-- /*Main settings, background*/ --> 
html { 
    background: url(http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/Rainbow-lanscape-nature-scenery-images-new-desktop-hd-wallpapers-landscape-widescreen.jpg) no-repeat center center fixed; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
} 
<!-- /*top panel contains a name for the project from the left side and the 
ability to login via twitter and email*/ --> 
.topPanel { 
    list-style: none; 
    margin: 0; 

    color: #ffffff; 
    background: #000000; 

    padding:0px; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-between; 
} 
    .topPanel li { 
     margin: auto; 
    } 
     .topPanel li h2 { 
      padding: 0 10px; 
      margin: 3px; 
      text-align: center; 
     } 
     /*Change the color of links when you hover*/ 
     .underline { 
      color: #ffffff; 
      text-decoration: underline; 

      transition:color 1s; 
      -webkit-transition:color 1s; 
     } 
      .underline:hover { 
       color: #eb005f; 
      } 
@media all and (max-width: 800px) { 
    .topPanel { 
     justify-content: space-around; 
    } 
} 
@media (max-width: 600px) { 
    .topPanel { 
     -webkit-flex-flow: column wrap; 
    } 
}

Margin: 0不起作用。我注意到有時候這個空間沒有被顯示出來，它可能是？

在Chrome和Firefox中進行測試，顯示不正確。 Visually, you can see here.

來源

2014-01-11 SkyStar

那就是'body'元素上的默認保證金..用'體{保證金：0}' –

這是非常很難解碼你的英語 – Andy

你需要重新設置默認body margin和padding

body 
{ 
    margin:0; 
    padding:0; 
}

Demo

來源

2014-01-11 21:48:09 Sachin

頂部菜單中的可用空間，因爲它被刪除？

回答

相關問題