複数のテキストアラインメントを持つナビゲーションバーのドロップダウンリンク（ブートストラップ）

Question

リンクテキストに同じ行に複数の異なるアラインメントがあるナビゲーションドロップダウン（ブートストラップ3を使用）をしようとしています。

以下のコードでは、ドロップダウンAのリンクにHTML内の空白文字が含まれていますが、空白は無視されています（これは意味的にも意味がないと思います）。

私はナビゲーションメニューをドロップダウンBとドロップダウンCのようにしようとしていますが、ピリオドではなく空白で表示しようとしています。

ドロップダウンBには、左揃えの最初の部分（Foo）と左揃えの2番目の部分（Bar）がありますが、その間には模擬タブ文字があります。

ドロップダウンCには、左揃えの最初の部分（Foo）と右揃えの2番目の部分（Bar）があり、その間に模擬タブ文字があります。

私はスパンとバーを別のスパンに入れてみましたが、浮動小数点やテキストの整列を使って移動させてみましたが、新しい行に落とす（ひどい）。

ドロップダウンをドロップダウンBとドロップダウンCのように見えるようにするには、意味的に優れたHTMLとCSSを使用しますか？

（注意：インタラクティブ・コードは、フルスクリーンではるかに良い私のポイントを示している）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">My Site</a> 
 
     </div> 
 
     
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#home">Link 1</a></li> 
 
       <li><a href="#profile">Link 2</a></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown A <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Foooooooo Baaaaar</a></li> 
 
         <li><a href="#">Foo   Bar</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown B <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Foooooooo........Baaaaar</a></li> 
 
         <li><a href="#">Foo....................Bar</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown C <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Foooooooo........Baaaaar</a></li> 
 
         <li><a href="#">Foo............................Bar</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

Answer 1

あり、それを行うには、いくつかの方法は、おそらくですが、これは動作するようです：

LIは次のようになります：

<li><a href="#"><div style="width:100%"><div class="col-xs-6 navItem leftItem">Foooooooo</div><div class="col-xs-6 navItem rightItem">Baaaaar</div></div></a></li> 

エントリのCSSは次のようなものです：

.navItem{ 
    display:inline; 
    padding:0; 
} 

.leftItem{ 
    text-align:left; 
} 

.rightItem{ 
    text-align:right; 
}