将导航栏移动到媒体查询的右侧答案

【问题标题】：move navbar to right side on media query将导航栏移动到媒体查询的右侧
【发布时间】：2018-01-28 03:06:08
【问题描述】：

当浏览器窗口达到一定大小时，我试图将导航栏移动到右侧的固定位置，并在小于该大小时将其放在顶部。使用下面的代码（如 jsfiddle 中所示），当我调整 html 的大小时，导航栏在左侧（而不是右侧）对齐。

问题，如何在媒体查询中将导航栏移动到屏幕右侧。根据我在 SO 上找到的几个问题，使用 position: fixed; top:50%; right:0; 应该就足够了，但它没有按预期工作。

（注意如果要在链接到jsfiddle上进行测试，可以拉伸html部分的边界来触发媒体查询）。

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

【问题讨论】：

标签： javascript html css css-position

【解决方案1】：

是的，您设置了right，这是正确的。但是当你 inpsect 时，你可以看到该元素还设置了一个 left: 0。

在媒体查询中使用left: initial 重置left，并将一些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>

【讨论】：