親の残りの幅を塗りつぶし

Question

ナビゲーションメニューがあり、折りたたみ可能な子ページのリストがあります。ドロップダウン要素を除いて、同じ行にアクセス可能なページが必要です。これは私がこれまで持っていたものです。

<div class="container-fluid"> 
       <div class="row"> 
        <div class="col-sm-3 col-lg-2"> 
         <div class="navbar navbar-default navbar-fixed-side"> 
          <ul class="nav" id="side-menu-0"> 
           <li id="menu-template" class="nav"> 
            <a href="index.html"><i class="fa fa-dashboard fa-fw"></i>Dashboard</a> 
           </li> 
           <li id="menu-template-top" class="nav" role="menu"> 
            <a href="#" style="display:inline-block;" class="nav">Google</a> 
            <a href="#menu-template-top-sub" data-toggle="collapse" class="nav navbar-nav pull-right" style="display:inline-block;"><span class="caret"></span></a> 
              <ul id="menu-template-top-sub" class="collapse nav nav-second-level"> 
               <li class="nav"> 
                <a href="flot.html">Flot Charts</a> 
               </li> 
               <li class="nav"> 
                <a href="morris.html">Morris.js Charts</a> 
               </li> 
              </ul> 
            <!-- /.nav-second-level --> 
           </li> 
          </ul> 
         </div> 
        </div> 

ここでは動作中のフィドルですから、私は何をしようとしているのか分かります。私は "Google"のリンクを "Dashboard"リンクのように右に伸ばしたいと思っています。 Working Fiddle

Answer 1

このため、簡単な修正はこれを行うことです。ご希望の場合はもちろん、スタイルシートにこれを外部化でき

<a href="#" style="display:inline-block; width:calc(100% - 40px);" class="nav">Google</a> 

。

calc(100% - 40px)の40pxは、ドロップダウンキャレットの幅です。

これは、ドロップダウン展開ボタンの最後まで伸びます。

Answer 2

インラインブロックを表示する代わりに<a>タグに表示ブロックを追加します。ブロック要素は幅全体に広がります。