最大幅のコンテナでリストを囲む方法

Question

最大サイズは176pxです。アイテムがオーバーフローした場合、私はそれらをulコンテナの周りにラップします。それらがオーバーフローしない場合、私はulを幅に合わせるようにします。

私の例では、最初のリストがオーバーフローし、最大コンテナサイズを囲んでいます。ちょうど私が欲しいもの！ 2番目のリストはオーバーフローしません。したがって、コンテナはもっと小さくする必要があり、リストのサイズに合わせる必要があります。最大幅を追加しましたが、成功しませんでした。

2番目のリストコンテナをリストと同じ幅にするにはどうすればよいですか？

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.flagMenu { 
 
    border: 1px solid red; 
 
    max-width: 176px; 
 
    white-space: wrap; 
 
} 
 

 
.flagMenu li { 
 
    display: inline-block; 
 
}

<ul class="flagMenu"> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
</ul> 
 

 
<br><br> 
 

 
<ul class="flagMenu"> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
</ul>

Answer 1

あなたul要素にdisplay: inline-blockを追加します。

並べ替えられていないリスト要素は、デフォルトではブロックレベルの要素なので、常に新しい行に表示され、利用可能な幅全体を占有します。ブロックをインライン化することの表示プロパティを変更すると、そのデフォルトの動作をオーバーライドすることができます。..

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: auto; 
 
    display: inline-block 
 
} 
 

 
.flagMenu { 
 
    border: 1px solid red; 
 
    max-width: 176px; 
 
    width: auto; 
 
    white-space: wrap; 
 
} 
 

 
.flagMenu li { 
 
    display: inline-block; 
 
}

<ul class="flagMenu"> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
</ul> 
 

 
<br><br> 
 

 
<ul class="flagMenu" style="width: auto;"> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
</ul>