我试图在浏览器窗口达到一定大小时将导航栏移动到右侧的固定位置，并在浏览器窗口小于该大小时将其放在顶部。使用下面的代码（如 jsfiddle 中所示），当我调整 html 大小时，导航栏在左侧（而不是右侧）对齐。
问题，如何将媒体查询上的导航栏移动到屏幕的右侧。根据我在SO上发现的几个问题，使用它应该足够了position: fixed; top:50%; right:0;但它没有按预期工作。
（请注意，如果您想在链接到 jsfiddle 上进行测试，您可以拉伸 html 部分的边界以触发媒体查询）。
片段和jsfiddle https://jsfiddle.net/c66addfg/:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ddd;
}
.navbar ul,
.navbar li {
display: inline-block;
}
@media (min-width: 767px) {
.navbar {
position: fixed;
top: 50%;
right: 0;
background-color: #ddd;
width: 0%;
}
.navbar ul,
.navbar li {
display: block;
}
}
<nav class="navbar">
<ul class="navbar-top-right">
<li><button onclick="jump('header')">home</button></li>
<li><button onclick="jump('special')">Special</button></li>
<li><button onclick="jump('menu')">Menu</button></li>
<li><button onclick="jump('map')">Map</button></li>
<li><button onclick="jump('about')">About</button></li>
</ul>
</nav>
是的，你已经设置了right，这是正确的。但是当你检查时你可以看到该元素有一个left: 0也设定。
重置left using left: initial in the 媒体查询并设置一些width给你的navbar- 请参阅下面的演示：
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ddd;
}
.navbar ul,
.navbar li {
display: inline-block;
}
@media (min-width: 767px) {
.navbar {
position: fixed;
top: 50%;
right: 0;
left: initial;
width: 125px;
background-color: #ddd;
/*width: 0%;*/
}
.navbar ul,
.navbar li {
display: block;
}
}
<nav class="navbar">
<ul class="navbar-top-right">
<li><button onclick="jump('header')">home</button></li>
<li><button onclick="jump('special')">Special</button></li>
<li><button onclick="jump('menu')">Menu</button></li>
<li><button onclick="jump('map')">Map</button></li>
<li><button onclick="jump('about')">About</button></li>
</ul>
</nav>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
