如何保持我的右手導航固定？ （以便在調整瀏覽器大小時不會更改）

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 。