如何移動漢堡條旁邊的內聯菜單列表（菜單欄）右側

Question

我正在嘗試移動頁面右側漢堡條旁邊的內聯菜單。我正在使用bootsrtap，下面的圖片是我想要菜單出現的方式，有可能嗎？所以當用戶點擊漢堡條時，菜單出現在漢堡條旁邊的左邊。此刻它下降到菜單欄下方。這裏是bootsnip http://bootsnipp.com/user/snippets/M3gdX的例子。

下面是我的代碼（HTML）：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="/"><img id="header-image">Logo</a>   
</div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      <div class="menu-bar"></div> 
      <div class="menu-bar"></div> 
      <div class="menu-bar"></div> 
      </a> 
      <ul class="dropdown-menu" id="number-list"> 
      <ul class="list-inline"> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li><a href="blog.html">Blog</a></li> 
     <li><a href="gallery.html">Gallery</a></li> 
     <li><a href="about.html">About</a></li>        
     <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </ul> 
    </li> 
    </ul> 
    </div> 
</nav> 

的CSS代碼：

.menu-bar { 
width: 22px; 
height: 2px; 
background-color: white; 
margin: 6px ; 
border-radius: 1px; 
} 
#number-list.dropdown-menu { 
width: 300px; 
} 
.dropdwon-toggle { 
margin-right: 10px; 
} 

我是新來這似乎並不能在任何地方找到一個例子不會滑出頁面或翻過頁面的拖放左側菜單。

Answer 1

您可以設置float：left到您的li元素，使其在一行中水平。

<ul class="list-inline lefties"> 

    <li class="active lefties-item"> 
     <a href="index.html">Home</a> 
    </li> 

    <li class="lefties-item"> 
     <a href="blog.html">Blog</a> 
    </li> 

    <li class="lefties-item"> 
     <a href="gallery.html">Gallery</a> 
    </li> 

    <li class="lefties-item"> 
     <a href="about.html">About</a> 
    </li>  

    <li class="lefties-item"> 
     <a href="contact.html">Contact</a> 
    </li> 
</ul> 

CSS

ul.lefties:after { 
     clear: both; 
     display: block; 
     content: ""; 
    } 

.lefties-item { 
    float: left; 
}