Marco Marco - 2 months ago 4
CSS Question

how to wrap around a list with a max-width container

I have a list with a maximum size of 176px. If items overflow, i want them to wrap around the ul container. If they don't overflow, i want the ul to adjust to the width.

In my example, the first list overflows, and wraps around the max container size. Just what i want!
The second list doesn't overflow. So the container needs to be more smaller, needs to adjust to the size of the list. I've added a max-width, with no success.

How do i make my second list container to be as width as the list is ?



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

Add display: inline-block to your ul element.

Unorderded List elements are block level elements by default, so naturally they will always appear on a new line, and take up the full available width. By changing that display property to inline-block, you can override that default behavior..

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>

Comments