寻求更优方案：实现可向左扩展的自定义有序列表ol标签

Great question! The absolute positioning approach you’re using does come with those frustrating drawbacks—fixed widths causing line breaks and hardcoded positions breaking when fonts scale. Let’s fix this with a flexible, modern CSS layout that behaves just like native ordered lists but supports your custom labels perfectly.

The Core Problem with Your Current Approach #

• Absolute positioning removes the <span> from the document flow, so it can’t automatically adjust its width based on content (hence the line breaks).
• Hardcoded left and width values don’t adapt to font size changes, screen zoom, or different text lengths.

The Optimal Fix: CSS Grid Layout #

We’ll use CSS Grid to split each list item into two columns: one for the label (either default number or custom text) and one for the content. This lets the label column auto-adjust to its content, keeps everything aligned, and eliminates the need for absolute positioning.

CSS Code

/* Reset default OL styles and set up a counter for default numbering */
.custom-ol {
  list-style: none;
  padding-left: 0;
  counter-reset: list-counter;
}

/* Use Grid to layout each list item: label + content */
.custom-ol li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75em; /* Space between label and content (adjust as needed) */
  align-items: start;
  margin-bottom: 0.3em;
}

/* Style default numbered items with a counter */
.custom-ol li:not(.item-cus-name) {
  counter-increment: list-counter;
}

.custom-ol li:not(.item-cus-name)::before {
  content: counter(list-counter) ".";
  text-align: right;
}

/* Style custom label items */
.custom-ol li.item-cus-name .item-name {
  text-align: right;
}

Updated HTML

<ol class="custom-ol">
  <li>First item in an ordered list</li>
  <li>Second item</li>
  <li class="item-cus-name"><span class="item-name">Label <em>ehags</em></span>Third</li>
  <li class="item-cus-name"><span class="item-name">c.</span>Fourth</li>
  <li>More</li>
  <li>More</li>
  <li>More</li>
  <li>More</li>
  <li>More</li>
  <li>More</li>
  <li>More</li>
  <li>More</li>
</ol>

Why This Works #

1. Auto-Adapting Label Width: The grid’s first column (auto) expands to fit the longest label (whether it’s "Label ehags" or a two-digit number like "10."), just like native ordered lists do. No more line breaks for long custom labels.
2. Responsive to Font Changes: Since we’re not using fixed positions or widths, scaling the font size or zooming the page won’t break alignment—everything shifts together naturally.
3. Consistent Alignment: Both default numbers and custom labels are right-aligned in the same grid column, so they line up perfectly, just like native OLs.
4. Easy Customization: Adjust the gap value to tweak spacing between labels and content, or add minmax(2em, auto) to the grid column definition (grid-template-columns: minmax(2em, auto) 1fr) to set a minimum width for the label column.

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