不使用瀏覽器沖洗CSS導航欄

我正在構建導航欄。這就是HTML的樣子不使用瀏覽器沖洗CSS導航欄

<div class="navhead">TEXT</div> 
<div class="navcontainer"> 
<a href="#"><div class="button">TEXT</div></a> 
<a href="#"><div class="button">TEXT</div></a> 
<a href="#"><div class="button">TEXT</div></a> 
<a href="#"><div class="button">TEXT</div></a> 
<a href="#"><div class="button">TEXT</div></a> 
</div>

這就是CSS的樣子。

body { 
    margin:0px; 
    padding:0px; 
    font-family:"futura"; 
    margin-top:75px; 
    height:100%; 
    width:100%; 
} 

.navcontainer { 
    width:100%; 
    position:fixed; 
    background-color:#FFF; 
    height:60px; 
    top:24px; 
    border:solid; 
    color:#000; 
    border-top:none; 
    border-bottom:solid; 
    border-left:none; 
    border-right:none; 
    margin:0px; 
    padding:0px; 
} 

.button { 
    width:20%; 
    height:60px; 
    float:left; 
    background-color:#FFF; 
    color:#000; 
    text-align:center; 
    vertical-align:central; 
    line-height:60px; 
    transition:background-color 1.5s ease; 
    margin:0px; 
    padding:0px; 
} 

.button:hover { 
    width:20%; 
    height:60px; 
    float:left; 
    background-color:#000; 
    color:#FFF; 
    text-align:center; 
    vertical-align:central; 
    line-height:60px; 
    margin:0px; 
    padding:0px; 
} 

.navhead { 
    width:100%; 
    color:#FFF; 
    background-color:#000; 
    position:fixed; 
    top:0px; 
    height:24px; 
    text-align:center; 
    font-size:9px; 
    line-height:24px; 
}

我遇到的問題是右邊的最後一個按鈕沒有與瀏覽器窗口齊平。我真的不知道我做錯了什麼。我將所有我認爲需要的東西加入到「身體」課程中，但仍然有空間......我的意思是，頂部沒有空間，就在最後一個按鈕的右側。

jsfiddle here

來源

2014-02-22 jadeallencook

它看起來不錯，我的Firefox。你正在使用哪種瀏覽器？ – Stu1986C

@ Stu1986C Safari – jadeallencook

在我的Safari瀏覽器中看起來很好。 – GhostGambler

這是一個更好的方式來組織你的HTML和更可靠的方式來創建菜單：http://codepen.io/pageaffairs/pen/xaGuq

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

body { 
    margin:0px; 
    padding:0px; 
    font-family:"futura"; 
    margin-top:75px; 
    height:100%; 
    width:100%; 
} 

.navcontainer { 
    width:100%; 
    position:fixed; 
    background-color:#FFF; 
    top:24px; 
    border:solid; 
    color:#000; 
    border-top:none; 
    border-bottom:solid; 
    border-left:none; 
    border-right:none; 
    margin:0px; 
    padding:0px; 
    list-style: none; 
    display: table; 
    table-layout: fixed; 
} 

.navcontainer li {display: table-cell;} 

.navcontainer li a {line-height: 60px; 
    background-color:#FFF; 
    color:#000; 
    text-align:center; 
    transition:background-color 1.5s ease; 
    display: block; 
    text-decoration: none; 
} 

.navcontainer li a:hover { 
    background-color:#000; 
    color:#FFF; 
} 

.navhead { 
    width:100%; 
    color:#FFF; 
    background-color:#000; 
    position:fixed; 
    top:0px; 
    height:24px; 
    text-align:center; 
    font-size:9px; 
    line-height:24px; 
} 


</style> 
</head> 
<body> 

<div class="navhead">TEXT</div> 
<ul class="navcontainer"> 
<li> 
    <a href="#">TEXT</a> 
</li> 
<li> 
    <a href="#">TEXT</a> 
</li> 
<li> 
    <a href="#">TEXT</a> 
</li> 
<li> 
    <a href="#">TEXT</a> 
</li> 
<li> 
    <a href="#">TEXT</a> 
</li> 
</ul> 

</body> 
</html>

來源

2014-02-22 22:27:41

不使用瀏覽器沖洗CSS導航欄

回答

相關問題