个人中心
gpt4 book ai didi

html - 简单的 CSS。水平菜单在位置 : fixed 时不保持其长度

转载 作者：行者123 更新时间：2023-11-28 06:30:54 25 4
gpt4 key购买 nike

我正在处理我的第一个 HTML 和 CSS 元素，代码有自己的想法!

所以...我做了一个水平菜单。它显示非常酷，整个页面宽度都有背景颜色。

但是当我想把它设为position: fixed，让它在宽度小的时候停留在页面上，背景色从宽度上消失。

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>

没有固定位置的 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;
}

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

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

最佳答案

试试这个……这将在位置固定

时起作用 
.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>

关于html - 简单的 CSS。水平菜单在位置 : fixed 时不保持其长度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34973945/

25 4 0
文章推荐： ios - 在 iPhone 上访问创建的 pdf 文件
文章推荐： c++ - Matlab 2013a + MEX C 程序
文章推荐： ios - Swift/iOS 等同于 Android 中的微调器？
文章推荐： swift - 无法在强制转换中将类型 'String?' 的值转换为类型 'NSString'