我有一个侧面导航栏，并且我已将 float 设置为右侧 然后当我放置位置:固定；它向左漂浮 为什么会发生这种情况？谁能帮助我吗？
这是我的 html:
<div id="navbar">
<ul>
<li><a href="default.asp"> <i class="fa fa-pagelines fa-2x"></i></a></li>
<li><a href="news.asp"> <i class="fa fa-smile-o fa-2x"></i></a></li>
<li><a href="contact.asp"> <i class="fa fa-envelope-o fa-2x"></i></a></li>
<li><a href="about.asp"> <i class="fa fa-home fa-2x"></i></a></li>
<li><a href="default.asp"> <i class="fa fa-plus-square fa-2x"></i></a></li>
<li><a href="news.asp"> <i class="fa fa-bell-o fa-2x"></i></a></li>
<li><a href="contact.asp"> <i class="fa fa-cog fa-2x"></i></a></li>
<li><a href="about.asp"> <i class="fa fa-clock-o fa-2x"></i></a></li>
<li><a href="about.asp"> <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;
}
谢谢:)
最佳答案
发生这种情况是因为与 position:relative 的元素相比，具有 position:fixed 的元素不会拉伸(stretch)到整个宽度。
所以你可以设置:
#navbar {
width: 100%;
position:fixed;
}
它们会正常工作:JSFiddle
另一种方法，您可以删除ul中的float: right，并设置为#navbar top/right。
这也可以:JSFiddle
关于html - 当位置为 "Fixed"时的侧导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43686572/