html - 如何让我的右手导航保持固定？ (以便在调整浏览器大小时它不会改变)

Question

我已经查找了一些解决方案 - 但我的 css 似乎不起作用:/ 这是我的 CSS:

#mainNav {  
    right: 0;
    letter-spacing: 3px;
    position: absolute;
    top: 70%;
    height: 20px;
    margin-top: -10px;      
    display: inline-block;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-transform: uppercase:

}




#mainNav li{
    display: inline;
    margin: 0px 8px 0px 0px;
    position:relative;

    }


#mainnav ul{
    display: inline;
    margin: 0px 8px 0px 0px;

}
#mainnav ul li{

   color: #000;
}
#mainNav li a{
    text-decoration: none;
    padding: 10px 15px 10px 15px;
    background-color:#efefef;
    font-size:10pt; 
    color: #4f5052;
}



#mainNav li a:hover{
    background-color: #fff;
    color: #91877e;

    }

#mainNav li a:active{
    color:#91877e;

    }

li a:hover{
    background-color: #fff;
    color: #91877e;

}

我已经尝试过位置固定 - 即使我在顶部等处改变，它也只会切断一半的导航。如果有人有任何简单的解决方案或任何有帮助的东西，请发帖 :D 谢谢。

HTML

 <div id="mainnav">
    <ul>

  <li><a href="/"><strong>Home</strong></a></li><font color="#91877e"<font size=3></font></color>
         <li><a href="/mind/"> Investment</a><font color="#91877e"<font size=3></font></color>
        <li><a href="/body/">Rentals</a></li><font color="#91877e"<font size=3></font></color>
        <li><a href="/soul/">About</a><font color="#91877e"<font size=3></font></color>
        <li><a href="/soul/">Contact</a></li>

    </ul>
</div>

Answer 1

在您的 HTML 代码中有一些无法使用的 tags 并且在您提供的 CSS 中我发现您使用了 # mainNav 选择器而不是 #mainnav。这是您在 JSFiddle 中的代码的工作版本.请注意，我添加了示例文本以便有一个滚动条。