start - Lista ordenada(HTML) alfa inferior con paréntesis derechos

ol html

Question

El tipo de lista alfa inferior predeterminado para la lista ordenada usa un punto ''.''. ¿Hay alguna manera de usar un paréntesis correcto en lugar de a) ... b) ..etc?

Answer 1

Agregar esto al CSS dio algunos resultados interesantes. Estaba cerca, pero no había cigarros.

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: '')''
}

----- Editado para incluir la solución de Iazel, en los comentarios -----

He perfeccionado tu solución:

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: '')'';
    background-color: #FFF;
    text-align: center;
}

El fondo y la position: absolute hizo el truco!

Answer 2

Esto funciona para mí en IE7, FF3.6, Opera 9.64 y Chrome 6.0.4:

<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
</ol>

esto está en línea porque está codificado para un correo electrónico, pero el punto principal es que el lapso actúa como un bloque de contenido y arrastra al paren al territorio izquierdo negativo para que se alinee con los números de la lista. los dos márgenes son para compensar las diferencias IE7 y FF

espero que esto ayude.

Answer 3

aprovechando la respuesta de DisgruntledGoat, la amplié para admitir sublistas y estilos cuando lo necesitaba. Compartirlo aquí en caso de que ayude a alguien.

https://jsfiddle.net/0a8992b9/ outputs:

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha

Answer 4

Aquí hay una buena solución. (Honestamente, me sorprendí a mí mismo con esto.) CSS tiene algo llamado counters , donde puede establecer, por ejemplo, números de capítulo automáticos en cada encabezado. Un poco de modificación te da el siguiente; Tendrá que ordenar el relleno, etc. usted mismo.

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

<span>custom list style type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Funciona en todos los navegadores modernos e IE9 + (y posiblemente IE8 pero puede tener errores).

Actualización: agregué el selector de elementos secundarios para evitar que las listas anidadas seleccionen el estilo principal. Trejder también se refiere a un buen punto en los comentarios de que la alineación del elemento de la lista también está mal. Un artículo sobre 456bereastreet tiene una buena solución que implica posicionar absolutamente el contador.

ol {
    counter-reset: list;
}
ol > li {
    list-style: none;
    position: relative;
}
ol > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

<span>custom list style type (v2):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Aquí hay un jsFiddle que muestra el resultado, incluidas las listas anidadas.