Question

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

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

（请注意，如果要对链接到jsfiddle进行测试，可以扩展html部分的边界以触发媒体查询。）

摘录和jsfiddle：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

是的，您已设置right，这是正确的。但是当你进入时，你可以看到该元素也设置了left: 0。

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

在媒体查询上将导航栏移动到右侧

1 个答案: