如何使我的导航栏穿过整个屏幕？
如何使我的导航栏穿过整个屏幕？
提问于 2014-01-16 20:30:04
我正在制作一个非常漂亮的导航栏，看起来如下：
这是我的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个像素的白色。有什么我能做的吗？
希望这听起来不会让人困惑。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-01-16 21:15:04
您要在边缘添加一个边框，使其从文档的边缘推开。您需要从css文件中的ul.menu中删除这些代码行，从而从边缘删除边框。
border-left:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(255,255,255,0.3);这将删除边框从边缘，然后你将不会得到周围的白色像素的边缘。
希望这能有所帮助。
Stack Overflow用户
发布于 2014-01-16 20:35:16
从ul.menu中删除以下内容
边界-左侧:1PX固体rgba(0,0,0,0.3)； 边界-右侧:1 1px实心rgba(255,255,255,0.3)；
Stack Overflow用户
发布于 2014-01-16 20:38:32
您可以通过两种方式来实现这一点，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%;之前它是正确工作的。
- 机箱大小浏览器支持
- Calc浏览器支持
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21172211
复制相关文章
相似问题
腾讯云开发者
