If I have an unordered list that I am using for an icon menu like the menu seen in a word processor or text editor. When the window gets below say 600px the icons get hidden and I want them to break down onto the next line.
<ul>
<li>Icon One</li>
<li>Icon twi</li>
<li>Icon three</li>
<li>Icon four</li>
<li>Icon five</li>
</ul>
This list is an inline list and I need it to break after the 4th item into two rows IF the window is less than 600px.
Is there a css solution to this without having to create a separate list or add another row?
i.e. something like this
<style>
@media only screen and (max-width: 600px) {
.listing {
display:inline;
}
.breakitem {
display:breakhere;
}
}
</style>
<ul class="listing">
<li>Icon One</li>
<li>Icon twi</li>
<li>Icon three</li>
<li class="breakitem">Icon four</li>
<li>Icon five</li>
</ul>
question from:
https://stackoverflow.com/questions/65833721/add-a-break-to-an-unordered-list-with-css-when-window-width-is-less-than-600px 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
