html - 位置为 "Fixed"时的侧导航栏

Question

我有一个侧面导航栏，我已经将 float 设置为正确的然后当我把位置:固定；它向左漂浮为什么会这样？谁能帮帮我？

这是我的 html:

<div id="navbar">
 <ul>
 <li><a href="default.asp">&nbsp; &nbsp;<i class="fa fa-pagelines fa-2x"></i></a></li>
 <li><a href="news.asp">&nbsp; &nbsp;<i class="fa fa-smile-o fa-2x"></i></a></li>
 <li><a href="contact.asp">&nbsp; &nbsp;<i class="fa fa-envelope-o fa-2x"></i></a></li>
<li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-home fa-2x"></i></a></li>
 <li><a href="default.asp">&nbsp; &nbsp;<i class="fa fa-plus-square fa-2x"></i></a></li>
 <li><a href="news.asp">&nbsp; &nbsp;<i class="fa fa-bell-o fa-2x"></i></a></li>
 <li><a href="contact.asp">&nbsp; &nbsp;<i class="fa fa-cog fa-2x"></i></a></li>
 <li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-clock-o fa-2x"></i></a></li>
 <li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-power-off fa-2x"></i></a></li>
</ul>
</div>

这是我的 CSS:

#navbar{
position:fixed;


}
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height:auto;
    width: 70px;
  background: rgba(255, 255, 255, 0.1);
    float:right;
}


li a {
    display: block;
    color: #ffffff;
    padding: 22.2px 10px;
    text-decoration: none;
     -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}

li a:hover,li a:focus {
    background-color:#28a828;
    color: green;

谢谢你:)

Answer 1

发生这种情况是因为与 position: relative 的元素相比，position: fixed 的元素不会拉伸(stretch)整个宽度。

所以你可以设置:

#navbar {
 width: 100%;
 position:fixed;
}

它们会正常工作:JSFiddle

---

另一种方式，你可以移除ul中的float: right，并设置为#navbar top/right。

这也适用:JSFiddle