HTML/CSS <nav>元素顯示填充頂

我新的網站和CSS設計..我已經開始用HTML/CSS <nav>元素顯示填充頂

我創建了一個簡單的水平<nav>菜單HTML5元素玩，但因爲某些原因有一些顯示在菜單上方的填充將停止顯示在頁面的頂部。

HTML：

<nav class="site-nav"> 
    <ul> 
     <li class=""> <a href=".html"></a> 

     </li> 
     <li class=""> <a class="" href=".html">Maps</a> 

     </li> 
     <li class=""> <a class="" href=".html">Lighting</a> 

     </li> 
     <li class=""> <a class="" href=".html">Services</a> 

     </li> 
     <li class=""> <a class="" href=".html">Contact Us</a> 
     </li> 
    </ul> 
</nav>

CSS：

article, aside, figcaption, figure, footer, header, main, nav, section { 
    display: block; 
} 
body, dt, dd, h1, h2, h3, th, td { 
    margin: 0 auto; 
    padding:0; 
    width: 70%; 
} 
ul, ol { 
    list-style: none; 
    padding: 0; 
} 

.site-nav { 
    /*width: 100%;*/ 
    height: 48px; 
    background: #ac0c0c; /* Old browsers */ 
    background-image: -moz-linear-gradient(#bf0d0d, #860909); /* FF3.6+ */ 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bf0d0d), color-stop(100%, #860909)); /* Chrome,Safari4+ */ 
    background-image: -webkit-linear-gradient(#bf0d0d, #860909); /* Chrome10+,Safari5.1+ */ 
    background-image: -o-linear-gradient(#bf0d0d, #860909);/* Opera 11.10+ */ 
    background: -ms-linear-gradient(#bf0d0d, #860909); /* IE10+ */ 
    background-image: linear-gradient(#bf0d0d, #860909); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf0d0d', endColorstr='#860909',GradientType=0); /* IE6-8 */ 
    text-align: center; 
} 

.site-nav ul { 
} 

.site-nav li { 
    display: inline; 
    list-style-type: none; 
} 


.site-nav li a { 
    text-align: center; 
    padding-right: 40px; 
    color: white; 
} 

.site-nav a:hover { 
    background-color: #2d8ff0; 
    color: white; 
    text-shadow: none; 
}

我也注意到每個菜單項中的文本沒有出現在其元素的中心

來源

2014-06-26 user3731438

UL元素有一個保證金 – Michael

試試這個： UL，OL { 的margin-top：0像素; list-style：none; } –

您也可以嘗試使用重置（類似normalize），因爲它會幫助解決跨瀏覽器兼容性問題... – zik

您可以將您的css改爲ul至margin 0 auto。

http://jsfiddle.net/LmcE7/7/`">JSFiddle：

來源

2014-06-26 18:24:35 Mayank

試試這個：

ul, ol { margin-top: 0px; list-style: none; }

來源

2014-06-26 18:27:31

-1

資產淨值周圍有一定的餘量，您應該將其設置爲0。保證金在元素之外，填充在裏面（Google爲'box-model'的圖片做澄清），這是你的瀏覽器在默認情況下所做的事情，這些東西通常是依賴於瀏覽器的。

一個很好的做法，我想想，就是在CSS樣式表的最上面「重置」所有內容的邊距和填充：

* { 
    margin:0; 
    padding:0; 
}

A *表示'一切'。通過這樣做，可以防止這些依賴於瀏覽器的問題。

來源

2014-06-26 18:29:23 poepje

什麼是-1？ – poepje

A ul默認情況下具有margin-top：1em。 1em等於您當前的字體大小（默認情況下爲16像素），所以如果您更改ul或其父元素的字體大小，邊距也會更改。

這消除了：

ul{margin-top:0px}

你的文本不居中，因爲你必須：

site-nav li a { 
    padding-right: 40px; 
    }

你一個元素默認顯示爲內聯，因此沒有寬度中心in。

將文本居中並保持其他所有內容相同的一種方法是在兩邊添加相同的填充：

site-nav li a { 
    padding-right: 20px; 
    padding-left: 20px; 
    }

但是，它看起來像你需要添加額外的項目的資產淨值來說明中心的各個環節。用於顯示目的的空標籤通常不是一種好的做法。

如果是這樣的情況下，最好的辦法是從HTML取出空列表項&鏈路，取出填充右，更改顯示內聯型塊，並定義一個寬度爲它們代替：

<nav class="site-nav"> 
    <ul> 
    <li class=""> <a class="" href=".html">Maps</a></li> 
    <li class=""> <a class="" href=".html">Lighting</a></li> 
    <li class=""> <a class="" href=".html">Services</a></li> 
    <li class=""> <a class="" href=".html">Contact Us</a></li> 
    </ul> 
</nav> 


.site-nav li a { 
    padding-right: 0px; 
    display:inline-block; 
    width:15%; 
}

來源

2014-06-28 14:49:01 chris

好的...由於<ul>標籤，導航欄不會粘在頁面的頂部。默認情況下<ul>標記會爲頁面引入一些邊距。還有一點需要注意的是不同的瀏覽器會引入不同的保證金。因此，爲確保導航欄堅持頂部，我們必須明確清除<ul>標記的邊距。只是Normalize.css的概念添加以下代碼

.site-nav ul { 
    margin-top:0px; 
}

因爲，我們對能與其他元素髮生以及上述問題的主題，因此熟悉和CSS復位是非常重要的。請給所附的鏈接閱讀：

What is the difference between Normalize.css and Reset CSS?

來源

2017-08-26 20:13:28

HTML/CSS <nav>元素顯示填充頂

回答

相關問題