numerada - listas no ordenadas html

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

Question

Estoy intentando crear una lista ordenada en CSS + HTML que se parece a esto:

No puedo por mi vida averiguar cómo 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 la posición list-style-position está configurada 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 flotadores, márgenes, etc. funcionó sin ajustar el número.

Esto parece algo que he visto en muchos sitios web, pero en este momento parece que no puedo encontrar un ejemplo que funcione, y Google no me da ningún resultado.

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

Debido a que un comentarista preguntó, aquí está el marcado 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 que he probado ha estado tan cerca de funcionar, así que no estoy seguro del valor de compartir lo que tengo actualmente. Aquí hay una versión que falló ...

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

Creo que encontré una solución para eso. Tu código HTML sería

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

Si aplicas los siguientes estilos, se verá 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;
}

Luego me gustaría jugar con los rellenos y el radio para que aparezca como un círculo.

Answer 2

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

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

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

Una idea que surgió en mi cabeza sería usar una fuente que tenga sus números en círculos, como este , y luego simplemente diseñar el elemento <ol> para usar esa fuente y el elemento <li> para usar su fuente normal . La desventaja de esto es que tendrías que mantener tu lista debajo de los 10 elementos, y el navegador del usuario tendría que descargar una fuente completa solo para eso. Además, debe elegir una que coincida con las otras fuentes de 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 la lista por completo (aún se utiliza el mismo formato HTML, pero establecer list-style:none; ). Luego, los números se insertarán utilizando las funciones poco utilizadas de CSS :before y count() .

En su caso, estaría en las siguientes líneas:

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

Esto te dará la misma secuencia numerada. A continuación, deberá agregar más estilos al selector de arriba para darle un fondo de círculo, algunos colores y un poco de margen. También necesitaría <li> elemento <li> alguna manera para que todo su texto estuviera sangrado desde el número en lugar de ajustarlo 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 reseña y ejemplos, junto con una tabla de compatibilidad del navegador.

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

Answer 3

Encuentro que los navegadores posicionan la lista estilo de imagen en varios lugares y uno solo tiene el control de posición "afuera" y "adentro".

Recomiendo lo siguiente:

http://jsfiddle.net/vEZHU/

NOTA: También puedes usar float para distribuirlos 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 ideas de una respuesta anterior que escribí:

• ¿Cómo usar CSS para rodear un número con un círculo?

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

IE8 no admite border-radius , y las soluciones alternativas como CSS3 PIE no funcionan con :before . Y, los navegadores más antiguos como IE7 no admiten el counter .

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

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

Por lo tanto, existe un enfoque sofisticado que no funcionará en IE7 + IE8, 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 esto sucede .

Entonces estás viendo este problema:

• Divs flotantes CSS en las alturas variables
• https://.com/search?q=user%3A405015+masonry

Answer 5

Si alguien todavía está leyendo esto, encontré el mismo problema y encontré un tutorial que fue extremadamente útil.

Estilismo ordenado números

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

Answer 6

Usaría flexbox y agregaría ''divs'' al ''li'' que contiene el número.

 <div class="container">
<ul class="info-list">
<li><div>1.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>2.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>3.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
</ul>
<ul class="info-list">
<li><div>4.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>5.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>6.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
</ul>
</div>

CSS:

.container {
display: flex;
}
.info-list li {
list-style: none;
display: flex;
}
.info-list li > div {
display: inline-block;
border: 2px solid #ccc;
border-radius: 100%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: space-around;
margin-right: 10px;
}

En codepen: https://codepen.io/mkempinsky/pen/OBNXGO

Answer 7

EDITAR: He cambiado el código, así que trata de emparejar lo que tienes

Intenté hacer esto con un carrusel que estaba haciendo con una imagen y un 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 elemento. Para que aparezcan horizontalmente mi css se 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 que todas las imágenes se alinearan horizontalmente. Para editar cada elemento dentro de la lista, deberá colocarlos en div s y 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. Usted puede simplemente estilo de ellos por clase como esta:

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

También recuerdo que necesitaba asegurarme de que la lista tuviera al menos el ancho de cada elemento antes de que pudiera flotar a la izquierda. Si no lo fuera, entonces se sentarían en el fondo.

Answer 8

contenido: contador (li) con incremento no funciona en mi menos, así que encontré algunos wokraround :)

li {
position: relative;
line-height: 2.5em;
list-style-type: none;
&:before{
content: '''';
position: absolute;
left: -29px;
top: 7px;
display: block;
background: @btn-bg-secondary;
width: 20px;
height: 20px;
border-radius: 50%;
color: @bg-color-primary;
padding-left: 7px;
line-height: 1.5em;
}
&:nth-child(1):before{
content: ''1'';
}
&:nth-child(2):before{
content: ''2'';
}
&:nth-child(3):before{
content: ''3'';
}
&:nth-child(4):before{
content: ''4'';
}
&:nth-child(5):before{
content: ''5'';
}
&:nth-child(6):before{
content: ''6'';
}
&:nth-child(7):before{
content: ''7'';
}
&:nth-child(8):before{
content: ''8'';
}
}

http://jsfiddle.net/du6ezxj7/