折りたたむための枠線の崩壊の提供は、オーバーフローの影響を受けます。

Question

ulliを使用してグループボタンを作成しています。 liをulで浮動させるために、私はdisplay:tableの値をulに、display:table-cellをliの要素に設定しました。 Li要素にはspanとdivノードがあり、これを使ってテキスト/アイコンを追加します。

これは問題なく動作します。

ただし、テーブルにborder-collapse:collapseを設定すると、width:100%のコンセプトは期待通りに機能しません。スパン（li）にさらにテキストを渡すと、liの幅が指定されたスペースにラップするのではなく増加します。私はwidth:100%〜ulを設定しました。その親のdivは300pxです。私li要素で隠されたオーバーフローが、役に立たない

私はborder-collapse:separateに設定されている場合、このオーバーフローの問題が解決さが、私は（各境界1ピクセルのための）二重の太い境界線をしたくないを設定することで試してみました。 border-collapse:collapseでさらに内容を提供しても、liの中にテキストを折り返すような解決策を提示してください。それ以外の場合は、ダブルボーダーなしでborder-collapse:separateのオプションを指定してください。

は、ここに私のplunker

https://plnkr.co/edit/th0ylX4dccZmoSeURk77?p=preview

おかげ

Answer 1

あなたはもっと自分のタスクのためのフレックスを使用することでしょうです。 display: flexをコンテナに追加し、flex: 1 1 auto〜li要素に追加してください。 flex: 1 1 autoは、この要素が使用可能なすべての領域を占めることを意味します。別の例：http://jsfiddle.net/w23nuqvx/。

.table_ul { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
     align-items: center; 
 
    
 
    -webkit-box-pack: start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    
 
    width: 300px; 
 
    
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    /* flex-wrap: nowrap; disabling wrapping*/ 
 
    
 
    list-style: none; 
 
} 
 

 
.cells_li { 
 
    -webkit-box-flex: 1; 
 
      -ms-flex: 1 1 auto; 
 
       flex: 1 1 auto; 
 
    
 
    border-top: 1px solid red; 
 
    border-left: 1px solid red; 
 
    border-bottom: 1px solid red; 
 
    
 
    padding: .5em; 
 
    text-align: center; 
 
} 
 

 
.cells_li:last-child { 
 
    border-right: 1px solid red; 
 
}

<div id="group" class="main_div"> 
 
    <ul class="table_ul"> 
 
    <li class="cells_li"><div><span>fghjkjhgfdsdfghj</span></div></li> 
 
    <li class="cells_li"><div><span>Desktop</span></div></li> 
 
    <li class="cells_li"><div><span>DeskTop</span></div></li> 
 
    </ul> 
 
</div>