将导航栏移到媒体查询的右侧 [英] move navbar to right side on media query

问题描述

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

I'm trying to move a navbar to a fixed position on the right side when the browser window reaches a certain size and have it on the top when it's less than that size. With the code below (as shown in the jsfiddle) the navbar is aligning on the left (rather than the right) side when I resize the html.

问题，如何将导航栏移动到媒体查询屏幕的右侧.根据我在SO上发现的几个问题，使用 position应该足够了:fixed;最高:50％;right:0; ，但无法正常工作.

Question, how can I move the navbar to the right side of the screen on the media query. According to several questions I found on SO, it should be sufficient to use position: fixed; top:50%; right:0; but it's not working as intended.

(请注意，如果要测试链接到jsfiddle的内容，可以拉伸html部分的边界以触发媒体查询.)

(Note that if you want to test on the linked to jsfiddle, you can stretch the boundaries of the html section to trigger the media query).

摘录和 jsfiddle :

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

Yes, you have set right, and rightly so. But when you inpsect you can see that the element has a left: 0 also set.

使用媒体查询中的 left:initial 重置 left ，并为您的设置一些 width >导航栏-参见下面的演示

Reset the left using left: initial in the media query and set some width to your navbar - see demo below:

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

这篇关于将导航栏移到媒体查询的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！