如何使導航欄遍及整個屏幕？

Question

我正在制作一個非常精美的導航欄，如下所示： 在此處輸入圖片說明 這是我的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個像素的白色。 有什么我可以刪除的嗎？

希望這不會引起混淆。

Answer 1

從ul.menu刪除以下ul.menu

border-left：1px solid rgba（0,0,0,0.3）;

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

Answer 2

您可以通過兩種方式進行處理，css box-sizing或css calc(0) 。

這是我對box-sizing: border-box;所做的工作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％加上您的border-left / border-right。

或者您可以保留width: 100%; 完全消失，因為它是塊級元素，它將以100％的寬度顯示其自身。 這就是為什么在您添加width: 100%;之前它可以正常工作的原因width: 100%; 。

大小調整的瀏覽器支持
Calc瀏覽器支持

Answer 3

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

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

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

這將刪除邊緣的邊框，然后邊緣將不會出現白色像素。

希望這可以幫助。

如何使導航欄遍及整個屏幕？

問題描述

3 個解決方案

解決方案1
1 2014-01-16 20:35:16

解決方案2
1 2014-01-16 20:38:32

解決方案3
1 已采納 2014-01-16 21:15:04

如何使導航欄遍及整個屏幕？

問題描述

3 個解決方案

解決方案1 1 2014-01-16 20:35:16

解決方案2 1 2014-01-16 20:38:32

解決方案3 1 已采納 2014-01-16 21:15:04

解決方案1
1 2014-01-16 20:35:16

解決方案2
1 2014-01-16 20:38:32

解決方案3
1 已采納 2014-01-16 21:15:04