Me gustaría ir más allá de las ideas sugeridas en p. Ej. ¿Cómo se pueden personalizar los números en un lista ordenada? y usar un fragmento de HTML posiblemente complicado para crear mis propias etiquetas en una lista ordenada. Por ejemplo:

ol { padding-left: 10em }
li.item-cus-name {
  list-style-type: none
}
span.item-name {
  display: inline-block;
  position: absolute; left: -19.8em;
  width: 30em;
  text-align: right;
}
<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>

Lo que estoy tratando de hacer es dejar que el elemento <span> sustituya a la etiqueta habitual, con el texto de la etiqueta expandiéndose hacia la izquierda (como sucede cuando la numeración habitual alcanza los dígitos dobles). Esta solución es muy frágil:

  • Si tengo una etiqueta extra larga que desborda el ancho que establecí, se envuelve, lo cual no quiero.
  • La posición exacta requerida al usar el posicionamiento de absolute necesita una manipulación constante (por ejemplo, cambiar el relleno del elemento ol en el ejemplo), y no funciona bien, por ejemplo, aumentando el tamaño de la fuente .

Seguramente hay una mejor manera?

0
Matthew Daws 30 ago. 2020 a las 11:53

1 respuesta

La mejor respuesta

Si no desea que el texto se ajuste, puede usar white-space:nowrap ... y posicionar la "etiqueta" requiere absolutamente que li se coloque relative.

Si siempre decimos que la etiqueta sea 100% right, entonces el espacio entre la etiqueta y li es simplemente una cuestión de margen estándar.

ol {
  padding-left: 10em
}

li {
  position: relative;
}

li.item-cus-name {
  list-style-type: none
}

span.item-name {
  position: absolute;
  right: 100%;
  white-space: nowrap;
  margin-right: .4em; /* adjust to your requirements */
}
<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>
1
Paulie_D 30 ago. 2020 a las 11:33