右对齐菜单子元素与css

Question

我不知道如何处理css，以便我的子元素在右侧。有人可以帮忙吗？

＆＃13;

＆＃13;

.navbar-collapse {
		max-height: 400px;
		overflow-y: auto;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#top">1</a></li>
						<li><a class="drop" href="#">2</a>
		             <ul>
                          <li><a href="#about">22</a></li>
                          <li><a href="#portfolio">222</a></li>
				     </ul>  
					    </li>
						<li><a href="#service">3</a></li>
						<li><a href="#team">4</a></li>
						<li><a class="drop" href="#">5</a>
						<ul>
                          <li><a href="#about2">55?</a></li>
                          <li><a href="#team2">555</a></li>
				     </ul>  
					    </li>
						<li><a href="#contact">6</a></li>
					</ul>
				</div>

＆＃13;

＆＃13;

＆＃13;

现在我的子元素（22,222和55,555）位于底部（在完整页面中查看）。

Answer 1

瘦是ul子元素（22,222和55,555）和a.drop只有display: block只需用display：inline-block`替换它：

＆＃13;

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<style>
  .navbar-collapse {
    max-height: 400px;
    overflow-y: auto;
  }

  .sub-menu,
  .nav>li>a{
    padding-top: 10px;
    display: inline-block;
    vertical-align: top;
  }

  .sub-menu{
    padding-left: 20px;    
  }
</style>
  


<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#top">1</a></li>
        
        <li><a class="drop" href="#">2</a>
            <ul class="sub-menu">
                <li><a href="#about">22</a>
                </li>
                <li><a href="#portfolio">222</a>
                </li>
            </ul>
        </li>
        
        <li><a href="#service">3</a></li>
        
        <li><a href="#team">4</a></li>
        
        <li><a class="drop" href="#">5</a>
            <ul class="sub-menu">
                <li><a href="#about2">55?</a>
                </li>
                <li><a href="#team2">555</a>
                </li>
            </ul>
        </li>
        
        <li><a href="#contact">6</a> </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

请在整页中查看，因为.navbar-collapse有display: none低于768px;

Here working jsfiddle example

如果您希望右侧的ul只是覆盖该元素的引导样式，如下所示：

＆＃13;

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<style>
  
  .navbar-collapse {
    max-height: 400px;
    display: block;
    overflow-y: auto;
  }

  .sub-menu,
  .nav>li>a{
    padding-top: 10px;
    display: inline-block;
    vertical-align: top;
  }

  .sub-menu{
    padding-left: 20px;    
  }
  
  
  /*overwrite the default styles of bootstrat bellow 768px*/
  .navbar-nav{
    float: right !important;
    margin: 0;
  }

  .navbar-nav>li{
    float: left;
  }
  
</style>
  

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#top">1</a></li>
        
        <li><a class="drop" href="#">2</a>
            <ul class="sub-menu">
                <li><a href="#about">22</a>
                </li>
                <li><a href="#portfolio">222</a>
                </li>
            </ul>
        </li>
        
        <li><a href="#service">3</a></li>
        
        <li><a href="#team">4</a></li>
        
        <li><a class="drop" href="#">5</a>
            <ul class="sub-menu">
                <li><a href="#about2">55?</a>
                </li>
                <li><a href="#team2">555</a>
                </li>
            </ul>
        </li>
        
        <li><a href="#contact">6</a> </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Here the jsfiddle for the above