如何修复右手导航？ （以便在调整浏览器大小时不会更改）

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。