Html 如何使导航栏覆盖整个屏幕？_Html_Css_Formatting

Html 如何使导航栏覆盖整个屏幕？

html css formatting

Html 如何使导航栏覆盖整个屏幕？,html,css,formatting,Html,Css,Formatting,我正在制作一个非常奇特的导航栏，如下所示：这是我的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

我正在制作一个非常奇特的导航栏，如下所示：这是我的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>

它在底部放置一个滚动条，在右边缘放置2个像素的白色。我能做些什么来移除这些吗

希望这听起来不会令人困惑。

从

ul.菜单中删除以下内容
左边框：1px实心rgba（0,0,0,0.3）
右边框：1px实心rgba（255255,0.3）
您可以通过两种方式来实现这一点，cssbox size
或csscalc（0）

以下是我所做的：
这样做的目的是将框大小调整
应用于标题标记内的所有元素。使用框大小：边框框填充、边框、边距等都计算到宽度中。否则，当您使用100%宽度时，它将添加100%加上您的左/右边框
或者您可以留下宽度：100%完全退出，因为它是一个块级元素，它将显示其自身为100%宽度。这就是为什么在添加width:100%之前它可以正常工作的原因




您正在边缘添加边框，使其从文档边缘推出。您需要从css文件的ul.菜单中删除这些代码行，从而从边缘删除边框
    border-left:1px solid rgba(0,0,0,0.3);

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

这将删除边缘的边框，然后您将无法获得边缘周围的白色像素
希望这有帮助。使用盒子大小。我很高兴我能帮上忙。@JackNelson好吧，它没有解决什么问题？试着说得更具体一点，这样我就有了一些东西……它并没有解决我的问题。它仍然会给我滚动条。我看不到滚动条，你在使用什么浏览器？当我只是把你发布的代码放进去时，我仍然会看到滚动条。我也在使用firefox。
.header * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

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

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