使Navbar链接沿导航栏移动，而不是在宽度减小时换行

Question

在全屏幕中，Navbar链接是水平布局的

然而，当宽度改变时，它们变得像这样

如何在保持水平宽度变化时将它们移到左侧？

HTML

<nav>
<h1 id=>Nav</h1> <div id="NHide">   
<ul>
    <li><a class="NavL" href="#slide1" title="Sample Text">Slide 1</a></li>
    <li><a class="NavL" href="#slide2" title="Sample Text">Slide 2</a></li>
    <li><a class="NavL" href="#slide1" title="Sample Text">Slide 3</a></li>
    <li><a class="NavL" href="#slide1" title="Sample Text">Slide 4</a></li>
</ul>
</nav>

CSS

#NHide{
position:absolute;
left:77%;
top:0%;    
}   

nav {
position: fixed;
z-index:1;    
font-size: 24px;
width: 100%;
line-height: 48px;
height: 48px;
background: #000;
text-align: left;
font-family: 'PT Sans', sans-serif;
color: #fff;
} 

ul { 
list-style-type: none;
margin: 0;
padding: 0;
float:left;
}

li {
display:inline-block;
}

.NavL {
display: block;
width: 100px;
}

Answer 1

你必须改编这个CSS

#NHide{
  position:absolute;
  left:77%;
  top:0%;    
}   

到

#NHide{
  float:right
}

或（但前一个更好）

#NHide{
  position:absolute;
  right: 0;
  top:0;
}

既然你说它总是位于左边77％的位置，它就会四处乱转，因为你的导航太大而不能在一条线上，而且左边也是77％。

如果这不能解决您的问题，请分享一个工作示例，例如Demo Fiddle。

Answer 2

您想要修改指向导航栏右侧的链接，只需设置right: 0并删除left: 77%

fiddle

#NHide{
    position: absolute;
    right 0;
    top: 0%;    
} 

Answer 3

在你的风格中使用它

#NHide
{
position:absolute;
right:0px;
top:0%;    
}   
h1#headnav
{
position:absolute;
left:0px;
top:-28px;
}

并添加您的代码

<h1 id="headnav">Nav</h1>