Question

我在我的第一个HTML和CSS项目中，代码有自己的想法！

所以......我做了一个横向菜单。它显示非常酷，整个页面宽度的背景颜色。

但是当我想让它定位：固定，以便当宽度较小时它停留在页面上，背景颜色从宽度上消失。

HTML：

＆＃13;

    <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>

＆＃13;

没有固定位置的CSS，效果很好。

＆＃13;

.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;
}

＆＃13;

以及使颜色消失的CSS代码：

＆＃13;

.nav ul {
	margin:            0px;
	list-style-type:   none;
	padding:           5px 0px 5px 0px;
    position: fixed;
    margin-left: 0px; 
}

＆＃13;

Answer 1

试试这个...当位置为fixed

时，这将有效

.nav {
    background-color:  #488AC7;
    margin: none;
    width:100%;
    position:fixed;
}

修复.nav而不是ul。如果你想尝试这个完整的代码，只需复制并粘贴。然后运行

<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>

Answer 2

position:fixed;应该固定元素相对于视口的位置，无论是否滚动。所以你必须为元素提供宽度。

在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>

详细了解http://www.w3schools.com/css/css_positioning.asp

的定位情况

Answer 3

更新导航类：

.nav {
    background-color:#488AC7;
    margin:none
    position:fixed;
    width:100%;
    top:0;
}

Answer 4

仅添加宽度：100％;到ul，您将获得整页宽度的背景色

.nav ul {
	margin:            0px;
	list-style-type:   none;
	padding:           5px 0px 5px 0px;
    position: fixed;
    margin-left: 0px; 
    width: 100%;
}

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

4 个答案: