tengo que mostrar como¿Cómo agregar los corchetes (a) a la lista ordenada? compatible en todos los navegadores
(a)
(b)
(c)
Actualización:
he encontrado una manera CSS
ol {list-style-type: none;}
li:before {content: "(" counter(section, lower-alpha) ") ";}
li { counter-increment: section;}
pero no funciona en IE 7 y versiones anteriores.
No puede obtener (a) (b) (c).
Usted puede sin embargo obtener la carta sin los corchetes:
<ul style="list-style-type: lower-latin;">...</ul>
Ver http://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style-type_all
Sé cómo obtener letras sin corchetes. Le hice preguntas para saber cómo agregar soporte. Creo que no hay opción :( –
These are your options según la W3C.
Con CSS no es posible. Tendría que hacer una lista personalizada usando javascript (o similar).
Esto es posible con los contadores personalizados, pero al menos IE7- no lo admite, otros no. Ver aquí para más detalles: http://www.quirksmode.org/css/counter.html
Ex:
li:before {
content: "(" counter(mycounter,lower-latin) ")";
}
pero necesito 'viejo' porque está en la lista ordenada –
@jitendra Entonces necesitarás cambiar el CSS en consecuencia, esto es solo un ejemplo. Solo te estoy señalando a la derecha dirección, tendrás que codificarlo tú mismo. – deceze
No hay manera integrada para realizar esta acción. Lo que significa que ingresas a la tierra de hacks (divertidos).
Puede intentar una imagen de fondo de dos paréntesis.
En su lugar hice párrafos. Hice una sangría en el párrafo y luego saqué la primera línea, usando una sangría de texto y numerada por mí mismo.
.list_indent {
margin-left:48px;
}
.list_indent p {
text-indent:-26px;
}
<div class="list_indent">
<p> (1) The recruitment report and a copy of the blah and blah and blah and blah and blah and blah and blah and blah.;
</p>
<p> (2) A copy of the blah and blah and blah and blah and blah and blah and blah and blah.
</p>
<p> (3) Recruitment.
</p>
</div>
Desde CSS3 El problema parece resuelto:
style="list-style-type: parenthesized-lower-latin;"
o simplemente puede añadir el texto cuenta manualmente sin tener yo preocupación sobre retrocesos del navegador. Funciona en cualquier navegador!
ul.abc-list {
list-style: none;
padding-left: 30px;
}
ul.abc-list > li > span.counter {
position: absolute;
margin-left: -20px;
/*if you want to right align the text
*
* width: 15px;
* text-align: right;
*/
}<ul class="abc-list">
<li><span class="counter">a)</span> One</li>
<li><span class="counter">b)</span> Two</li>
<li><span class="counter">c)</span> Three</li>
<li><span class="counter">d)</span> Four</li>
<li><span class="counter">e)</span> Five</li>
<ul>utilizo este fragmento de código en MediaWiki con CSS habilitado. No estoy seguro de si esto funcionará en versiones anteriores de IE ...
{{#css:
.laparent ol { counter-reset: item }
.laparent li { display: block ; counter-increment: item; }
.laparent li:before { content: " ("counter(item,lower-alpha)") "; }
}}
<ol class=laparent>
<li> this is the first item;
<li> this is the second item; or
<li> this is the third item.
</ol>
Salidas:
(a) this is the first item;
(b) this is the second item; or
(c) this is the third item.
qué Downvote para esto? –
Esos son paréntesis, no corchetes. ;) –
Es bueno que lo hayas descifrado. Sin embargo, cambiar la pregunta después del hecho no es bueno. Esto le dará a IE más capacidades, pero no incluye 'contador': http://code.google.com/p/ie7-js/ Creo que en su mayoría no tienes suerte. – deceze