当它定位固定时,我无法将导航对齐到右侧。我读了以前的线程,我实现了什么是建议,但尽管如此,我不能使它留在主容器内,并向右对齐。
它要么完全不移动(float: right),要么从容器中移出
<div class="container">
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="nav-positioning">
<div class="menu-primary-navigation-container">
<ul id="primary-menu" class="menu nav-menu">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</nav><!-- #site-navigation -->
</div>
.container {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 30px;
box-sizing: border-box;
}
header .main-navigation {
position: fixed;
padding: 20px 0;
z-index: 3;
width: auto;
}
.main-navigation {
clear: both;
display: block;
}
问题发生在本网站:www.oktawiakata.com
登录:Login
密码:superstrongpassword
提前感谢你的提示!
我不能让它保持在主容器内并向右对齐。
对于position:fixed
,元素的位置将相对于浏览器窗口,所以在CSS术语中说它将留在主容器内是不完全正确的。
如果你想让它留在主容器内,你应该使用position: absolute
#main-container{
position: relative;
}
#navigation{
position: absolute;
right: 0;
}
更新:
使用下面的代码作为导航栏,就像你在注释中提供的例子一样:
HTML<div id="navigation-bar">
<div class="navigation-content">
<ul class="navigation-menu">
<!-- Your <li> elements here -->
</ul>
</div>
</div>
CSS #navigation-bar{
position: fixed;
top: 0;
right: 0;
left: 0;
height: auto;
padding: 15px 0px;
}
#navigation-bar .navigation-content{
width: 1280px;
margin: auto;
text-align: right
}
#navigation-bar .navigation-content ul{
// Your list styles ...
}
当你的元素被定位为固定元素时,你需要将右值更改为0px;
#someContainerCSS{
position: fixed;
right : 0px;
}
应该可以了