位置为“固定”时的侧导航栏

Question

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

这是我的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 的元素不会延伸到整个宽度。

所以你可以设置：

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

它们会正常工作：JSFiddle

---

另外一种方式，你可以将ul中的float: right去掉，设置为#navbar top/right。

这也可以：JSFiddle

Answer 2

您需要使用 ID 为“内容”或类似以下内容的 div 标签：<div id="content">。

然后在 CSS 中给它一个 left-margin 或 80px 或类似大小的东西。 （我建议改用 EM，因为它们可以随网络浏览器扩展并在任何平台上工作）

您的最终代码应如下所示：

Index.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>

<div id="content">
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
</div>

stylesheet.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;
}

#content {
  margin-left: 80px;
}

您可以在此处查看此工作的演示：JSfiddle DEMO。