简体   繁体   English

简单的CSS。 固定位置时水平菜单的长度不固定

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM