如何横向排列select的option标签并通过optgroup进行分隔？

Hey there! Your current solution gets the job done, but let's refine it into something more semantic, maintainable, and user-friendly—native <select> elements aren't really built for horizontal layout, so we can avoid those hacky CSS workarounds. Here are two solid approaches:

This approach uses native radio buttons and labels, which perfectly match your "mutually exclusive selection" requirement. It's far more accessible, easier to style, and intuitive for both users and screen readers.

HTML #

<div class="page-size-controls">
  <span class="control-label">Showing elements on the page</span>
  <div class="size-options">
    <input type="radio" id="show-10" name="page-size" value="10" checked>
    <label for="show-10">10</label>
    <span class="option-divider">|</span>
    <input type="radio" id="show-20" name="page-size" value="20">
    <label for="show-20">20</label>
    <span class="option-divider">|</span>
    <input type="radio" id="show-30" name="page-size" value="30">
    <label for="show-30">30</label>
  </div>
</div>

CSS #

.page-size-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 30px;
  font-family: sans-serif;
}

.size-options {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Hide native radio buttons visually (keep them accessible) */
.page-size-controls input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* Style labels to look like selectable options */
.page-size-controls label {
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

/* Highlight the selected option */
.page-size-controls input[type="radio"]:checked + label {
  background-color: #e6f0ff;
  color: #2563eb;
  font-weight: 500;
}

/* Style the dividers */
.option-divider {
  color: #94a3b8;
}

Why this works better: #

• Semantic clarity: Radio buttons explicitly communicate that only one option can be selected.
• Full style control: No weird negative margins or absolute positioning hacks—Flexbox handles the horizontal layout cleanly.
• Accessibility: Screen readers will recognize this as a radio group, making it usable for all users.
• Easy maintenance: Adding/removing options only requires editing the HTML; no complex CSS adjustments needed.

If you have to stick with a <select> element (e.g., for form submission compatibility), we can ditch the optgroup hack and style it to look clean, even if it doesn't show all options horizontally (native selects don't support true horizontal option display).

HTML #

<div class="styled-select-container">
  <span class="select-label">Showing elements on the page</span>
  <select name="page-size">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
  </select>
</div>

CSS #

.styled-select-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 30px;
  font-family: sans-serif;
}

.styled-select-container select {
  padding: 0.3rem 1.8rem 0.3rem 0.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background-color: white;
  /* Custom dropdown arrow */
  background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  cursor: pointer;
}

.styled-select-container select:hover {
  border-color: #cbd5e1;
}

.styled-select-container select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

Final Recommendation #

Go with the radio button group approach—it's the most flexible, accessible, and maintainable solution for your desired UI. It perfectly matches the "10 | 20 | 30" horizontal display you want, without relying on fragile CSS hacks.

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