如何讓導航欄穿過整個屏幕？

我想提出一個很花哨的導航條是這樣的： enter image description here 這裏是我的CSS：如何讓導航欄穿過整個屏幕？

.header 
{ 
width:100%; 
height:80px; 
background:#939393; 
background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69))); 
background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); 
border-top:1px solid #939393; 
position:relative; 
margin-bottom:30px; 

} 
body 
{ 
margin:0; 
} 
ul 
{ 
margin:0; 
padding:0; 
} 

ul.menu 
{ 
height:80px; 
border-left:1px solid rgba(0,0,0,0.3); 
border-right:1px solid rgba(255,255,255,0.3); 
float:left; 
} 
ul.menu li 
{ 
overflow:hidden; 
width:200px; 
list-style: none; 
float:left; 
height:79px; 
text-align:center; 
background:-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1))); 
background:-moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); 
} 

ul li a 
{ 
display:block; 
padding:0 20px; 
border-left:1px solid rgba(255,255,255,0.1); 
border-right:1px solid rgba(0,0,0,0.1); 
text-align:center; 
line-height:79px; 
background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69))); 
background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); 
-webkit-transition-property: background; 
-webkit-transition-duration: 1500ms; 
-moz-transition-property:background; 
-moz-transition-duration:1500ms; 
} 

ul li a:hover 
{ 
background:transparent none; 
} 

ul li.active a 
{ 
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1))); 
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); 
}

這裏是我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<div class="header"> 
    <div class="navbar"> 
     <ul class ="menu" rel="sam1"> 
      <li class="active"><a href="Home.htm">Home</a></li> 
      <li><a href="Compare.htm">Compare Products</a></li> 
      <li><a href="Contact.htm">Contact</a></li> 
      <li><a href="Download.htm">Download</a></li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

我想要做的是跨度整個導航鏈接貫穿整個頁面。我可以把每一個環節到25％，而正常工作，但是當我嘗試設置...

ul.menu 
{ 
width:100%; 
}

它把滾動條在底部，並在右邊白色的2個像素。有什麼我可以做的，以消除這些？

希望這聽起來不會令人困惑。

來源

2014-01-16 Jack Nelson

使用方塊大小。 http://css-tricks.com/box-sizing/ –

你在這使得它從您的文檔的邊緣壓出邊緣添加邊框。您需要通過從您的css文件中的ul.menu中刪除這些代碼行來刪除邊緣。

border-left:1px solid rgba(0,0,0,0.3); 

    border-right:1px solid rgba(255,255,255,0.3);

這將刪除邊緣的邊緣，然後你將不會得到邊緣周圍的白色像素。

希望這會有所幫助。

來源

2014-01-16 21:15:04 Dozer789

正是我需要的！ –

我很高興我能幫上忙。 – Dozer789

從ul.menu

左邊框拆卸：1px的固體RGBA（0,0,0,0.3）;

border-right：1px solid rgba（255,255,255,0.3）;

來源

2014-01-16 20:35:16 Craighead

[JSFiddle]（http：// jsfiddle。net/tzn6e /） – Craighead

這解決了我的問題，謝謝你們倆！ –

你可以去這兩種方式，CSS box-sizing或CSS calc(0)。

以下是我與box-sizing: border-box;：

.header * { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}

這是什麼東西做的是應用box-sizing的頭標記中的所有元素。用box-sizing: border-box;填充，邊框，邊距等都計算在寬度中。否則，當你做100％的寬度時，它會增加100％加上你的邊界左/邊界權。

或者你可以完全離開width: 100%;，因爲它是一個塊級元素，它將以100％的寬度顯示它自己。這就是爲什麼它能正常工作，直到你添加width: 100%;。

來源

2014-01-16 20:38:32

這並沒有解決它。 –

@JackNelson那它沒有解決什麼問題？嘗試更具體一點，所以我有一些東西要從... –

它沒有解決我的問題。 –

如何讓導航欄穿過整個屏幕？

回答

相關問題