examples - HTML+CSS: ¿Lista ordenada sin el período?

ul html

Question

Creo que la respuesta a esta pregunta es no ... pero ¿alguien sabe de una forma HTML / CSS para crear una lista ordenada sin un período después de los números? O, alternativamente, para especificar el carácter separador?

Idealmente, no quiero hacer una imagen de estilo de lista con una clase diferente para cada número, pero eso es todo lo que he podido imaginar hasta ahora ... Eso parece terriblemente poco romántico.

ES DECIR:

Default Style:
1. ______
2. ______
3. ______

Desired Style:
1  ______
2  ______
3  ______

Alternate Style:
1) ______
2) ______
3) ______

Answer 1

Acabo de encontrar una solución para los casos en los que simplemente desea eliminar el punto. No es la mejor solución, pero se hace solo con CSS y funciona en todos los navegadores. La desventaja es que necesita que el nodo de texto en el LI se incluya en otra etiqueta (<span> o algo así). En mi propio caso, <ol> se usó como una lista de enlaces, ¡así que podría usar mis etiquetas <a>!

El CSS que utilicé:

ol li a {
    float: right;
    margin: 8px 0px 0px -13px; /* collapses <a> and dots */
    padding-left: 10px; /* gives back some space between digit and text beginning */
    position: relative; z-index: 10; /* make the <a> appear ABOVE the dots */
    background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */
}

Answer 2

Aquí está la solución

Número de listas ordenadas anidadas en HTML

Todo lo que tienes que hacer es cambiar un poco aquí.

ol li:before {
                content: counter(level1) " "; /*Instead of ". " */
                counter-increment: level1;
            }

^^

Answer 3

Esto es perfectamente posible hacerlo solo con CSS (2.1):

ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}

Tenga en cuenta que esta solución se basa en: antes del pseudo-selector, por lo que algunos navegadores más antiguos, en particular IE6 y IE7, no representarán los números generados. Para esos navegadores, querrá agregar una regla CSS adicional que se dirija solo a ellos para usar el estilo de lista normal:

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

Answer 4

Parece que estás jodido con los puntos :) Creo que la única manera es construir la lista por ti mismo con <ul>

Answer 5

Puedes agregar los números más tarde usando jQuery:

$("ul").each(function() {
   $(this).find("li").each(function(index) {
      $(this)
        .css("list-style-type", "none")
        .prepend("<div class=''listnumber''>" + (index + 1) + "</div>");
   })
})

Prueba la muestra here .

Más información sobre jQuery here .