CSS横向滚动菜单换行：第23个<li>后换行问题求助

Hey Joe, let's figure out why your .breaker class isn't working and fix that line break after the 23rd <li>!

The main issue here is the white-space: nowrap on your .BgPickerScroll container. That CSS property forces all inline/inline-block elements inside to stay glued on a single line, completely ignoring any clear rules or natural line breaks. So first, we need to remove that restriction to let the layout behave as intended.

Depending on how your <li> elements are styled, here are two solid solutions:

Solution 1: For floating <li> elements #

If you're using float: left on your list items, use the nth-child selector to force a clear on the 24th item and beyond—this will push them to a new line:

/* First, replace nowrap with normal to allow wrapping */
.BgPickerScroll {
  white-space: normal;
  position: relative;
  overflow:auto;
  /* Keep your other existing styles here */
}

.BgPickerScroll li {
  float: left;
  /* Add your li styles (width, height, margin, etc.) here */
}

/* Force line break after the 23rd li */
.BgPickerScroll li:nth-child(n+24) {
  clear: left;
}

Solution 2: For inline-block <li> elements #

If your list items use display: inline-block, we can add a pseudo-element after the 23rd <li> to act as a full-width line breaker:

/* Remove the nowrap rule first */
.BgPickerScroll {
  white-space: normal;
  position: relative;
  overflow:auto;
  /* Keep your other existing styles */
}

.BgPickerScroll li {
  display: inline-block;
  /* Add your li styles here */
}

/* Insert an invisible full-width block after the 23rd li to trigger wrap */
.BgPickerScroll li:nth-child(23):after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden;
}

Quick bonus fix #

Your .BgPickerMenu has a fixed height: 80px. If adding a second line makes the content taller than 80px, it'll get cut off by overflow:hidden. Consider changing that to height: auto or adjusting the value to fit both lines of color options.

If you can modify your HTML directly (instead of just CSS), an even simpler approach is to insert an empty <div class="breaker"></div> right after the 23rd <li>, then style it like this:

.breaker {
  display: block;
  clear: both;
  width: 100%;
  height: 0;
  overflow: hidden;
}

This works across all browsers without relying on CSS pseudo-selectors.

内容的提问来源于stack exchange，提问作者joe