子リスト要素を水平にして全幅を取る方法

私はdomに入れ子リスト構造を持っています。子リスト要素を横に並べて全幅にしたい。どうすればこれを達成できますか？私のコード子リスト要素を水平にして全幅を取る方法

.workicons-list { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style:none; 
 
    display: inline-block; 
 
    background: #fff; 
 
} 
 
.workicons-list li { 
 
    float: left; 
 
    max-width:224px; 
 
    border:1px solid #000; 
 
} 
 

 
.workicons-sub-list { 
 
     padding: 0; 
 
    margin: 0; 
 
    list-style:none; 
 
    display: inline-block; 
 
    
 
} 
 
.workicons-sub-list li { 
 
    float:left; 
 
    max-width:224px; 
 
    border: none; 
 
}

<div class="options-row"> 
 
      
 
      <ul class="workicons-list"> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a> 
 
        
 
         <ul class="workicons-sub-list"> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
        </ul> 
 
        
 
       </li> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li> 
 
      </ul> 
 
      
 
      
 
     </div>

これは私がそれになりたいか、それはフルスクリーンに見え、これはどのようにある

出典

2016-07-27 Athul

あなたがブートストラップを使用している場合は、グリッドシステムと一緒に行くことができます:) –

@ MarkoMackic最初に試してみましたが、失敗しました。 1つのcol-md-12の内側の6つのcol-md-2のように、第2のリストは、各col-md-2の内側に別の6つのcol-md-2を有する。あなたが見せることができれば、グリッドでそれを行う方法、私は幸せ以上です。しかし、私は行の位置を修正したくないです – Athul

.workicons-list { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style:none; 
 
    display: inline-block; 
 
    background: #fff; 
 
    position: relative; 
 
} 
 
.workicons-list li { 
 
    float: left; 
 
    max-width:224px; 
 
    border:1px solid #000; 
 
} 
 
.workicons-list li.expanded { 
 
    max-width: 100%; 
 
} 
 

 
.workicons-sub-list { 
 
     padding: 0; 
 
    margin: 0; 
 
    list-style:none; 
 
    display: block; 
 
    position:absolute; 
 
    top:235px; 
 
    left:0; 
 
    width: 100% 
 
    
 
} 
 
.workicons-sub-list li { 
 
    float:left; 
 
    max-width:224px; 
 
    border: none; 
 
}

<div class="options-row"> 
 
      
 
      <ul class="workicons-list"> 
 
       <li class="expanded"><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a> 
 
        
 
         <ul class="workicons-sub-list"> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
          <li><a href="#"><img src="https://s31.postimg.org/a6irdmg5n/cleaner.png" class="img-responsive"></a></li> 
 
        </ul> 
 
        
 
       </li> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li> 
 
       <li><a href="#"><img src="https://s32.postimg.org/8t9ekfovp/brush.png" class="img-responsive"></a></li> 
 
      </ul> 
 
      
 
      
 
     </div>

.workicons-list liは最大幅224に設定されているため、デフォルトではその幅はその幅になります。また、floatをオンにすると、内側のメニュー項目を下に並べるだけです。開いているネストされたメニューの親liにクラスを追加する必要があるかもしれないので、幅を100％または何らかの幅に変更することができます。

また、展開時にサブメニューが親メニューのトップになることが望ましいかどうかは不明です。

出典

2016-07-27 17:13:29 NikZ

希望の動作は、最初のメニューの下のサブメニューです。どのように計画するかについてのサンプルコードを追加してください。私はあなたが言っていることを理解することができません。 – Athul

あなたを閉じることができる上記のコードを追加しました。以下のサブメニューが必要なので、メインメニューから相対位置を設定し、サブメニューをメインメニューの下に絶対配置しなければなりません。それを自動的に行うと、あなたに全幅が与えられます。 – NikZ

これはあなたのために機能しましたか？ – NikZ

子リスト要素を水平にして全幅を取る方法

答えて

関連する問題