[英]How do I make my navigation bar go across the whole screen?
我正在制作一个非常精美的导航栏,如下所示: 这是我的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个像素的白色。 有什么我可以删除的吗?
希望这不会引起混淆。
从ul.menu
删除以下ul.menu
border-left:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(255,255,255,0.3);
您可以通过两种方式进行处理,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%;
。
您在边缘添加了边框,使其从文档的边缘推出。 您需要通过从css文件中的ul.menu
中删除这些代码行来删除边缘的边框。
border-left:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(255,255,255,0.3);
这将删除边缘的边框,然后边缘将不会出现白色像素。
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.