0
最大サイズは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>