Números da lista renderizados incorretamente

Vou renderizar a mesma lista, aumentando o atributo start em uma casa decimal para cada uma subsequente:

1. Betsy
1. Tacy
1. Tib
1. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

Consigo reproduzir. É um problema de CSS, pois o espaço padrão em listas ordenadas (<ol>) normalmente é definido para acomodar números menores.

Notei que as mesmas listas renderizam de forma diferente por tema, então criei um componente de tema que apenas adicionou:

ol {
  margin-left: 3em;
}

Por outro lado, isso também se aplica a todas as listas, e quando o item não é um número grande de 5+ dígitos, as listas ordenadas parecem ter muito espaço…

Minha sugestão: aplique um componente que corresponda ao seu uso de listas ordenadas em seu site; acho raro extrair o meio de uma lista muito longa de itens, e não consigo imaginar alguém postando listas com 10.000 itens sem encontrar limites de caracteres. :slight_smile:

Pensei que talvez houvesse uma maneira de estilizar para que uma determinada lista sempre coubesse, mas a numeração em listas ordenadas é aplicada como pseudo-elemento (::marker), e não tenho certeza de como fazer cálculos de CSS nesses… :thinking:

3 curtidas