如何使导航栏遍及整个屏幕？
[英]How do I make my navigation bar go across the whole screen?
问题描述
I am making a very fancy navigation bar to look like this: 
我正在制作一个非常精美的导航栏，如下所示： Here is my css:
这是我的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%);
}
And here is my HTML: 这是我的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>
What I want to do is span the whole navigation links across the whole page. 我想要做的是将整个导航链接跨越整个页面。 I can put each link to 25%, and that works fine, but when I try to set... 我可以将每个链接设置为25％，这很好，但是当我尝试设置...
ul.menu
{
width:100%;
}
It puts a scrollbar at the bottom, and 2 pixels of white at the right edge. 它在底部放置一个滚动条，在右边缘放置2个像素的白色。 Is there anything I can do to remove those? 有什么我可以删除的吗？
Hopefully this doesn't sound confusing. 希望这不会引起混淆。
3 个解决方案
解决方案1
1 2014-01-16 20:35:16
Remove the following from ul.menu 从ul.menu删除以下ul.menu
border-left:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(255,255,255,0.3);
解决方案2
1 2014-01-16 20:38:32
You can go about this in two ways, css box-sizing or css calc(0) . 您可以通过两种方式进行处理，css box-sizing或css calc(0) 。
Here is what I did with box-sizing: border-box; 这是我对box-sizing: border-box;所做的工作box-sizing: border-box; : ：
.header * {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
What this is doing is applying box-sizing to all elements inside of the header tag. 这是对标题标记内的所有元素应用box-sizing 。 With box-sizing: border-box; 使用box-sizing: border-box; the padding, border, margin, etc are all calculated into the width. 填充，边框，边距等均计算为宽度。 Otherwise when you do width 100% it is adding 100% plus your border-left/border-right. 否则，当您将宽度设为100％时，它将加上100％加上您的border-left / border-right。
or you can leave width: 100%; 或者您可以保留width: 100%; out completely since it is a block level element it will display its self as 100% width. 完全消失，因为它是块级元素，它将以100％的宽度显示其自身。 That is why it works correctly until you add width: 100%; 这就是为什么在您添加width: 100%;之前它可以正常工作的原因width: 100%; . 。
解决方案3
1 已采纳 2014-01-16 21:15:04
You are adding a border at the edge which is making it push out from the edge of your document. 您在边缘添加了边框，使其从文档的边缘推出。 You need to remove the border from the edge by remove these lines of code from your ul.menu in your css file. 您需要通过从css文件中的ul.menu中删除这些代码行来删除边缘的边框。
border-left:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(255,255,255,0.3);
That will remove the border from the edges, and then you will not get the white pixels around the edges. 这将删除边缘的边框，然后边缘将不会出现白色像素。
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.