Cómo hacer tabulaciones en HTML/CSS

Question

Hay algún texto cuyo formato me gustaría mostrar en HTML. Aquí está una imagen:

Nota las líneas grises con las viñetas y los números de los párrafos. Las viñetas deben centrarse en la página y los números deben estar justificados a la derecha.

He estado tratando de pensar en cómo hacerlo en HTML y estoy en blanco. ¿Cómo capturaría este formato?

Answer 1

Flotaría el número a la derecha y centraría el contenido restante (los puntos). Si le da a los contenidos restantes un margen izquierdo y derecho igual de grande que los números son anchos, los contenidos estarán centrados.

Answer 2

Hay varias maneras que se me ocurren:

• Float + posición absoluta (Voy a dejar que los puristas explican éste)
• mesa de estilo antiguo (voy a explicar esto, ya que es el más fácil):

Si la anchura total de la zona es, por ejemplo, 300 x

<table><tr> 
    <td width="30"></td> 
    <td width="240" align="center">bullets</td> 
    <td width="30" align="right">number</td> 
</tr></table> 

Muchos la gente prefiere el uso de CSS puro, pero me gusta mis tablas, sólo trabajan para mí

Answer 3

puede utilizar las :before y :after pseudo-elementos con gran efecto aquí:

http://jsfiddle.net/yNnv4/1/

Esto funcionará en todos navegadores modernos e IE8 +. Si se requiere el apoyo IE7, esta respuesta no es para ti :)

#container { 
    counter-reset: nums; 
} 
p { 
    position: relative; 
    margin: 21px 0; 
} 
p:before { 
    content: '\2022 \2022'; 
    font-size: 2em; 
    position: absolute; 
    top: -8px; 
    left: 0; 
    line-height: 1px; 
    color: #888; 
    width: 100%; 
    text-align: center 
} 
p:after { 
    content: counter(nums); 
    counter-increment: nums; 
    font-size: 1.5em; 
    position: absolute; 
    top: -8px; 
    right: 0; 
    line-height: 1px; 
    color: #888; 
    font-family: sans-serif 
} 

Acerca de las propiedades counter:

• https://developer.mozilla.org/en/CSS_Counters
• http://www.w3.org/TR/CSS21/syndata.html#counter
• http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

---

No es posible incrementar (automáticamente) las viñetas.

Sin embargo, se puede hacer con un poco de repetición dudosa:

http://jsfiddle.net/N4txk/1/

p:before { content: '\2022' } 
p+p:before { content: '\2022 \2022' } 
p+p+p:before { content: '\2022 \2022 \2022' } 
/* .... */ 

(alternativamente, :nth-child se puede repetir de la misma manera: http://jsfiddle.net/N4txk/ - pero no va a trabajar en IE8 ; solo habrá dos viñetas)

Hay un límite superior en el número de viñetas que sería sensible, por lo que creo que sería aceptable copiar y pegar tantas veces como sea necesario.

Answer 4

¿Qué tal algo así?

http://jsfiddle.net/6eTCf/

<div class="separator"> 
    * <div class="page_number">1</div> 
</div> 


.separator{ 
    margin: 5px 0 5px 0; 
    color:gray; 
    position:relative; 
    text-align: center; 
} 

.page_number{ 
    position:absolute; 
    right: 3px; 
    top: 0; 
} 

Answer 5

que envolvía todo el asunto en un div, a continuación, utilizar el posicionamiento relativo/absoluto entre la envoltura y el div número de párrafo para obtener los números en el lado derecho de esa manera.

Aquí hay un fiddle que muestra cómo hacerlo.

Answer 6

Hay un par de formas en que puedo pensar.

Añadir un <div> entre los párrafos, a continuación, añadir dos <p> 's: <p class="dot"></p> y <p class="pnum">1</p>.

Estilo del <div> a la anchura de los párrafos, y ubicado en el CSS lo siguiente:

.dot{ text-align: center; } 
.pnum{ float: right; }