HTML + CSS: lista pedida sin el período?

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, como alternativa, ¿para especificar el carácter separador?

Idealmente no quiero hacer list-style-image con una clase diferente para cada número, pero eso es todo lo que he podido pensar hasta ahora ... Parece terriblemente no semántico.

IE:

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

Desired Style: 
1 ______ 
2 ______ 
3 ______ 

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

Answer 1

Esto es perfectamente posible hacerlo con sólo 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: before pseudo-selector, por lo que algunos navegadores más antiguos, IE6 e IE7 en particular, no mostrarán los números generados. Para estos navegadores, tendrá que añadir una regla CSS adicional que se dirige simplemente a utilizar los normales list-style:

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

Answer 2

Parece que está cagado con los períodos :) Creo que la única manera en que se construye la lista por sí mismo con <ul>

Answer 3

Puede añadir los números más adelante utilizando jQuery:

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

Tratar la muestra here.

Más información sobre jQuery here.

Answer 4

Aquí está la solución

Number nested ordered lists in HTML

Todo lo que tiene que decir a cambiar un poco aquí

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

^^

Answer 5

solo he encontrado una solución para los casos en los que desea eliminar simplemente el punto. No es la mejor solución, pero está hecha solo con CSS y funciona en todos los navegadores. La desventaja es que necesita el texto en el LI para ser envuelto en otra etiqueta (< span> o algo así). En mi caso, el < ol> se usó como una lista de enlaces, así que podría usar mis < a> tags!

El CSS que utiliza:

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