HTML + CSS: Lista numerada con los números dentro de círculos

Question

que estoy tratando de crear una lista ordenada en CSS + HTML que se ve así:

no puedo por la vida de mí averiguar cómo para hacer esto. He intentado usar list-image pero luego los números no aparecen. Intenté establecer un fondo, pero no aparecerá detrás del número si list-style-position está configurado en outside. Intenté configurarlo con un fondo y list-style-position: inside, luego puse el texto dentro del li en un div para alinearlo, pero ninguna combinación de flotantes, márgenes, etc. funcionó sin rodear el numeral.

Esto parece algo que he visto en muchos sitios web, pero por el momento parece que no puedo encontrar un ejemplo que funcione, y Google no está obteniendo ningún resultado.

Entonces, ¿alguien puede ayudarme con esto? ¿Cómo crearías lo anterior usando HTML + CSS, idealmente sin usar JS, y definitivamente sin usar solo imágenes? Este texto debe poderse seleccionar y copiar/pegar.

Debido a que un comentarista preguntó, aquí está el margen de beneficio que tengo ahora:

<ol> 
    <li><span>List item one.</span></li> 
    <li><span>List item two.</span></li> 
    <li><span>List item three.</span></li> 
</ol> 

Ninguno de los CSS He intentado siquiera se ha acercado a trabajar, así que no estoy seguro de que el valor de compartir lo Tengo actualmente. He aquí una versión que no ...

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; } 

Answer 1

El aspecto de diseño horizontal de la pregunta se puede lograr utilizando CSS float y/o display:inline-block;. Estos están bien documentados para esto, ya que los elementos de lista se utilizan a menudo para crear menús desplegables usando esta técnica, por lo que no voy a discutir más aquí.

El aspecto del número en un círculo es un poco más complicado.

No se puede lograr usando estilos de lista estándar, a menos que esté preparado para usar gráficos, y codifique el nombre de la imagen con cada uno. Este es un enfoque bastante antiguo, y sospecho que no es lo que estás buscando.

Una idea que vino a la cabeza sería el uso de una fuente que tiene sus números en círculos, como this one, y luego simplemente peinar el elemento <ol> utilizar esa fuente, y el elemento <li> utilizar su fuente normal. La desventaja de esto es que tendrías que mantener tu lista por debajo de 10 elementos, y el navegador del usuario necesitaría descargar toda una fuente solo para eso. Además, deberá elegir uno que coincida con las otras fuentes en su sitio. Probablemente no sea una solución ideal, pero funcionaría.

Una solución más práctica sería abandonar el estilo de lista por completo (aún usar el mismo marcado HTML, pero establecer list-style:none;). Los números se insertarían usando las funciones de poco uso de CSS :before y count().

En su caso, sería lo largo de las siguientes líneas:

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

esto le dará la misma secuencia numerada. Debería agregar más estilos al selector anterior para darle un fondo circular, algunos colores y un poco de margen. También necesitaría diseñar el elemento <li> de alguna manera para que todo el texto se sangrara del número en lugar de colocarlo debajo del número. Espero que esto se pueda hacer con display:inline-block; o similar.

Puede que necesite un poco de experimentación, y no he dado la respuesta completa, pero la técnica definitivamente funcionaría.

Consulte quirksmode.org para obtener una descripción y ejemplos, junto con un cuadro de compatibilidad del navegador.

Y la tabla de compatibilidad del navegador da una pista sobre el inconveniente principal de esta técnica: no funcionará en IE7 o anterior. Sin embargo, funciona en IE8 y en todos los demás navegadores, por lo que si puedes vivir con usuarios de IE7 que no lo ven (y no hay muchos en la actualidad), entonces debería estar bien.

Answer 2

EDIT: he cambiado el código para tratar de igualar lo que tiene

Traté de hacer esto con un carrusel que estaba haciendo con una imagen y enlace dentro de cada elemento de la lista como este:

<ol id = "list"> 
    <li class = "listItems"> 
     <!-- Image --> 
     <img src = "YourImage" class = "listNumber"></div> 
     <!-- Text --> 
     <div class = "listInfo">Info goes here</div> 
    </li> 
    </ol> 

y así sucesivamente para cada artículo. Para conseguir que aparezcan horizontalmente mi css veía así:

#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 */ 
    } 

Eso hizo todas las imágenes se alinean horizontalmente. Para editar cada elemento dentro de la lista, deberá colocarlos en div sy luego editar el css desde allí. Una vez que los tengas todos flotando de la misma manera, el CSS dentro de los divs no debería darte ningún problema. Puede simplemente estilo de ellos por clase así:

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

También recuerdo que tenía que asegura que la lista era al menos la anchura de cada artículo en él antes de que pudiera flotar a todos ellos a la izquierda. Si no fuera así, se sentarían en el fondo.

Answer 3

Encuentro que los navegadores colocan list-style-image en varios lugares y uno solo tiene el control de posición "exterior" & "inside".

recomiendo lo siguiente:

http://jsfiddle.net/vEZHU/

NOTA: También puede utilizar flotador para sentar a cabo o lo que hice. Además, esto supone que sabes de sprites.

Espero que esto tenga sentido.

Answer 4

estoy usando ideas que @Spudley tiene en su respuesta, y estoy usando las ideas de una respuesta anterior que escribí:

• How to use CSS to surround a number with a circle?

Ver:http://jsfiddle.net/j2gK8/

IE8 no es compatible con border-radius, y las soluciones alternativas como CSS3 PIE no funcionan con :before. Y, navegadores más antiguos como IE7 no son compatibles con counter.

Si desea que funcione en navegadores más antiguos, tendrá que recurrir a escribir los números usted mismo.También intercambié la fantasía esquinas redondeadas para una imagen normal (que podría tener esquinas redondeadas, pero no lo hace en mi ejemplo):

Ver:http://jsfiddle.net/XuHNF/

lo tanto, no es el enfoque de fantasía que ganó No funciona en IE7 + IE8, lo que probablemente lo descarta. Y luego está el método feo, pero compatible.

Por supuesto, siempre hay otro problema. Si tiene diferentes cantidades de texto, entonces this happens.

Estás a continuación, mirar este problema:

• CSS Floating Divs At Variable Heights
• https://stackoverflow.com/search?q=user%3A405015+masonry

Answer 5

creo que he encontrado una solución para eso. Su código HTML sería

<ol> 
    <li>First item</li> 
    <li>Second item</li> 
</ol> 

Si se aplican los siguientes estilos, que se pone bastante como un 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; 
} 

me permitiría jugar con rellenos y radio con el fin de hacer que parezca como una círculo

Answer 6

Si alguien todavía está leyendo esto, me encontré el mismo tema y encontré un tutorial que fue de gran ayuda.

Styling ordered list numbers

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;}