HTML + CSS: lista numerada com números dentro de círculos

Estou tentando criar uma lista ordenada em CSS + HTML que se parece com isso: Exemplo de lista CSS

Eu não posso para a vida de mim descobrir como fazer isso. Eu tentei usar a list-image mas os números não aparecem. Tentei definir um plano de fundo, mas ele não aparecerá atrás do número se list-style-position estiver definida como outside . Eu tentei defini-lo com um plano de fundo e list-style-position: inside , depois colocando o texto dentro do li em um div para alinhá-lo, mas nenhuma combinação de floats, margens, etc funcionou sem envolver o numeral.

Isso parece algo que eu já vi em muitos sites, mas no momento eu não consigo encontrar um exemplo de trabalho, nem estou procurando por isso me dando nenhum resultado.

Então, alguém pode me ajudar com isso? Como você criaria o acima usando HTML + CSS, idealmente sem usar JS, e definitivamente sem usar apenas imagens. Este texto precisa ser selecionável e copiar / pastável.

Porque um comentarista perguntou, aqui está a marcação que tenho agora:

 
  1. List item one.
  2. List item two.
  3. List item three.

Nenhum dos CSS que eu tentei chegou perto de funcionar, então não tenho certeza do valor de compartilhar o que tenho atualmente. Aqui está uma versão que falhou …

 ol { display: block; list-style: decimal outside url('/images/lists/yellow-circle-18px.png'); } ol li { width: 176px; margin-right: 20px; float: left; } ol li span { display: block; } 

O aspecto de layout horizontal da questão pode ser obtido usando o método float e / ou display:inline-block; CSS display:inline-block; . Eles são bem documentados para isso, já que os elementos da lista são frequentemente usados ​​para criar menus suspensos usando essa técnica, então não discutirei mais aqui.

O aspecto numérico circulado é um pouco mais complicado.

Ele não pode ser obtido usando estilos de lista padrão, a menos que você esteja preparado para usar charts e codificar o nome da imagem em cada um deles. Esta é uma abordagem bastante antiga, e eu suspeito que não é o que você está procurando.

Uma ideia que surgiu na minha cabeça seria usar uma fonte que tenha seus números em círculos, como este , e simplesmente estilize o elemento

    para usar essa fonte, e o elemento

  1. para usar sua fonte regular . O lado negativo disso é que você teria que manter sua lista abaixo de 10 itens, e o navegador do usuário precisaria baixar uma fonte inteira apenas para isso. Além disso, você precisa escolher uma que corresponda às outras fonts do seu site. Provavelmente não é uma solução ideal, mas funcionaria.

    Uma solução mais prática seria abandonar completamente o estilo da lista (ainda usar a mesma marcação HTML, mas definir list-style:none; ). Os números seriam então inseridos usando os resources pouco usados :before e count() do CSS.

    No seu caso, seria ao longo das seguintes linhas:

     ol ul:before { content: counter(mylist); } 

    Isso lhe dará a mesma seqüência numerada. Você precisaria adicionar outros estilos ao seletor acima para obter um plano de fundo circular, algumas colors e um pouco de margem. Você também precisaria estilizar o elemento

  2. alguma forma para que todo o texto fosse recuado a partir do número, em vez de ficar abaixo do número. Espero que isso possa ser feito com display:inline-block; ou similar.

    Pode precisar de um pouco de experimentação, e eu não dei a resposta completa, mas a técnica definitivamente funcionaria.

    Veja quirksmode.org para um writeup e exemplos, juntamente com um gráfico de compatibilidade do navegador.

    E o gráfico de compatibilidade de navegadores dá uma pista sobre a principal desvantagem dessa técnica: ela não funcionará no IE7 ou anterior. Ele funciona no IE8, e em todos os outros navegadores, então se você pode conviver com usuários do IE7 sem vê-lo (e não há muitos deles atualmente), então tudo bem.

    Estou usando idéias que o @Sududie tem em sua resposta e estou usando idéias de uma resposta anterior que escrevi:

    • Como usar o CSS para cercar um número com um círculo?

    Veja: http://jsfiddle.net/j2gK8/

    O IE8 não suporta border-radius , e soluções alternativas como o CSS3 PIE não funcionam com :before . E navegadores mais antigos, como o IE7, não suportam o counter .

    Se você quiser fazê-lo funcionar em navegadores mais antigos, você terá que recorrer a escrever os números por conta própria. Eu também troquei os extravagantes cantos arredondados por uma imagem normal (que poderia ter cantos arredondados, mas não no meu exemplo):

    Veja: http://jsfiddle.net/XuHNF/

    Então, há uma abordagem sofisticada que não funciona no IE7 + IE8, que provavelmente a elimina. E depois há o método feio, mas compatível.

    Claro, sempre há outro problema. Se você tem diferentes quantidades de texto, isso acontece .

    Então você está olhando para este problema:

    Se alguém ainda está lendo isso, eu encontrei o mesmo problema e encontrei um tutorial que foi extremamente útil.

    Estilizando números de lista ordenada

     ol { counter-reset:li; /* Initiate a counter */ margin-left:0; /* Remove the default left margin */ padding-left:0; /* Remove the default left padding */ } ol > li { position:relative; /* Create a positioning context */ margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */ padding:4px 8px; /* Add some spacing around the content */ list-style:none; /* Disable the normal item numbering */ border-top:2px solid #666; background:#f6f6f6; } ol > li:before { content:counter(li); /* Use the counter as content */ counter-increment:li; /* Increment the counter by 1 */ /* Position and style the number */ position:absolute; top:-2px; left:-2em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:2em; /* Some space between the number and the content in browsers that support generated content but not positioning it (Camino 2 is one example) */ margin-right:8px; padding:4px; border-top:2px solid #666; color:#fff; background:#666; font-weight:bold; font-family:"Helvetica Neue", Arial, sans-serif; text-align:center; } li ol, li ul {margin-top:6px;} ol ol li:last-child {margin-bottom:0;} 

    Eu acho que descobri uma solução para isso. Seu código HTML seria

     
    1. First item
    2. Second item

    Se você aplicar os seguintes estilos, será como um círculo:

     ol {margin-left:0; padding-left:0; counter-reset:item} ol>li {margin-left:0; padding-left:0; counter-increment:item; list-style:none inside;margin-bottom:10px} ol>li:before { content:"(" counter(item) ")"; padding:3px 5px; margin-right:0.5em; background:#ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } 

    Eu então brincava com almofadas e raio para fazer com que parecesse um círculo

    EDIT: eu mudei o código então tente e combine o que você tem

    Eu tentei fazer isso com um carrossel que eu estava fazendo com uma imagem e link dentro de cada item da lista como este:

      
    1. Info goes here

    e assim por diante para cada item. Para fazê-los aparecer horizontalmente, meu CSS ficou assim:

     #list { list-style: none; width: 5000px; /* Total width of list IMPORTANT*/ } /* Image gallery list item*/ #list li { float :left; /* Arranges the items in a horizontal list IMPORTANT */ } 

    Isso fez com que todas as imagens se alinhassem horizontalmente. Para editar cada item dentro da lista, você precisará colocá-los em div e editar o css a partir daí. Depois de tê-los todos flutuando da mesma maneira o css dentro dos divs não deve lhe dar problema. Você pode simplesmente estilizá-los por class assim:

     .listNumber { postion: absolute; left: (#)px; top: (#)px; } 

    Eu também lembro que eu precisava ter certeza de que a lista tinha pelo menos a largura de cada item antes que eu pudesse flutuar todos para a esquerda. Se não fosse, eles se sentariam no fundo.

    Acho que os navegadores posicionam a lista de estilo de imagem em vários locais e um tem apenas o controle de posição “externo” e “interno”.

    Eu recomendo o seguinte:

    http://jsfiddle.net/vEZHU/

    NOTA: Você também pode usar float para colocá-los para fora ou o que eu fiz. Além disso, isso indica que você sabe de sprites.

    Espero que isso faça sentido.