如何保持我的右手导航固定？ （以便在调整浏览器大小时不会更改）

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中代码的工作版本。 请注意，我添加了示例文本以具有scrollbar 。