[英]Simple CSS. Horizontal menu doesn't keep its length when position: fixed
I'm at my first HTML and CSS project and the code has a mind of its own! 我是我的第一个HTML和CSS项目,并且代码有自己的想法!
So... I did a horizontal menu. 所以...我做了一个水平菜单。 It displays really cool, with the background color on the entire page width.
它显示的非常酷,整个页面宽度上都有背景色。
But when I want to make it position: fixed, so that it stays on the page when the width is small, the background color disappears from the width. 但是,当我要使其位置固定时,使其在宽度较小时仍停留在页面上时,背景颜色将从宽度中消失。
The HTML: HTML:
<div class="nav"> <ul> <li class="selected"><a href="tema.html">Job Description Details</a></li> <li><a href="">Audit Trail</a></li> <li><a href="">Files</a></li> </ul> </div>
The CSS without the fixed position, which works great. 没有固定位置的CSS,效果很好。
.nav { background-color: #488AC7; margin: none; } .nav ul { margin: 0px; list-style-type: none; padding: 5px 0px 5px 0px; } .nav ul li { display: inline; padding: 5px 10px 5px 10px; } .nav ul li a:link, .nav ul li a:visited { color: #F0FFFF; border-bottom: none; font-weight: bold; } .nav ul li.selected { background-color: #F0FFFF; border-bottom: none; } .nav ul li.selected a:link, .nav ul li.selected a:visited { color: #488AC7; }
and the CSS code which makes the color go away: 和使颜色消失的CSS代码:
.nav ul { margin: 0px; list-style-type: none; padding: 5px 0px 5px 0px; position: fixed; margin-left: 0px; }
try this ... this will work when position is fixed
试试这个...当位置
fixed
时这将起作用
.nav {
background-color: #488AC7;
margin: none;
width:100%;
position:fixed;
}
fix yor .nav
not the ul
. 修复
.nav
而不是ul
。 if you want try this complete code, just copy and paste.then run 如果您想尝试此完整的代码,只需复制并粘贴。然后运行
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.mynavbar{
text-align: center;
padding: 1%;
background-color: black;
position: fixed;
width: 100%;
}
ul li{
list-style-type: none;
display: inline;
width: auto;
margin: 5%;
}
ul li a{
text-decoration: none;
font-family: helvetica;
font-size: 20px;
color:white;
}
ul li a:hover{
color: red;
}
</style>
<body>
<div class="mynavbar">
<ul>
<li class="selected"><a href="tema.html">Job Description Details</a></li>
<li><a href="">Audit Trail</a></li>
<li><a href="">Files</a></li>
</ul>
</div>
</body>
</html>
position:fixed;
is supposed to fix the position of the element relative to the viewport, regardless scroll. 应该固定元素相对于视口的位置,无论滚动如何。 So you will have to provide a width to the element.
因此,您将必须为元素提供宽度。
View the entire working code at https://jsfiddle.net/2j8s8xfz/1/ 查看完整的工作代码, 网址为https://jsfiddle.net/2j8s8xfz/1/
body{ min-height:900px; } .nav { background-color: #488AC7; margin: none; position:fixed; width:100%; } .nav ul { margin: 0px; list-style-type: none; padding: 5px 0px 5px 0px; } .nav ul li { display: inline; padding: 5px 10px 5px 10px; } .nav ul li a:link, .nav ul li a:visited { color: #F0FFFF; border-bottom: none; font-weight: bold; } .nav ul li.selected { background-color: #F0FFFF; border-bottom: none; } .nav ul li.selected a:link, .nav ul li.selected a:visited { color: #488AC7; }
<body> <div class="nav"> <ul> <li class="selected"><a href="tema.html">Job Description Details</a></li> <li><a href="">Audit Trail</a></li> <li><a href="">Files</a></li> </ul> </div> </body>
Read more about positioning at http://www.w3schools.com/css/css_positioning.asp 在http://www.w3schools.com/css/css_positioning.asp上了解有关定位的更多信息。
update nav class: 更新导航类:
.nav {
background-color:#488AC7;
margin:none
position:fixed;
width:100%;
top:0;
}
Add only width: 100%; 仅添加宽度:100%; to ul you will get background color over full width of page
到ul,您将获得整个页面宽度的背景色
.nav ul { margin: 0px; list-style-type: none; padding: 5px 0px 5px 0px; position: fixed; margin-left: 0px; width: 100%; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.