salto - ¿Cómo insertar espacios/pestañas en el texto usando HTML/CSS?
salto de linea html (11)
Posibles maneras:
<pre> ... </pre>
o
style="white-space:pre"
¿Algo más?
Espacio en blanco, ¿no podría simplemente usar relleno? Esa es una idea, lo siento, si no estoy haciendo esto correctamente, pero así es como puede agregar un "área en blanco" alrededor de su elemento. Entonces puedes usar las siguientes etiquetas CSS:
padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
Una vez más, lo siento si esto no es lo que estabas buscando.
Esto funcionó para mí: en mi CSS tengo: `
tab0 { position:absolute;left:25px; }
tab1 { position:absolute;left:50px; }
tab2 { position:absolute;left:75px; }
tab3 { position:absolute;left:100px; }
tab4 { position:absolute;left:125px; }
tab5 { position:absolute;left:150px; }
tab6 { position:absolute;left:175px; }
tab7 { position:absolute;left:200px; }
tab8 { position:absolute;left:225px; }
tab9 { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }
luego, en el código HTML solo uso mis pestañas:
Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75
La respuesta de user8657661 es la más cercana a mis necesidades (de alinear cosas en varias líneas). Sin embargo, no pude conseguir que el código de ejemplo funcionara como se indica, pero necesité cambiarlo de la siguiente manera:
<html>
<head>
<style>
.tab9 {position:absolute;left:150px; }
</style>
</head>
<body>
Dog Food: <span class="tab9"> $30</span><br/>
Milk of Magnesia:<span class="tab9"> $30</span><br/>
Pizza Kit:<span class="tab9"> $5</span><br/>
Mt Dew <span class="tab9"> $1.75</span><br/>
</body>
</html>
Si necesita números alineados a la derecha, puede cambiar a la left:150px
a la right:150px
, pero deberá modificar el número en función del ancho de la pantalla (según lo escrito, los números serían 150px desde el borde derecho de la pantalla. )
Me gusta usar esto:
En tu CSS:
.tab {
display:inline-block;
margin-left: 40px;
}
En tu HTML:
<p>Some Text <span class="tab">Tabbed Text</span></p>
Para insertar tab space
entre dos palabras / oraciones que suelo usar
 
y  
Puedes usar
para espacios, <
para <
(menor que, número de entidad <
) y >
para >
(mayor que, número de entidad >
).
Se puede encontrar una lista completa en esta dirección: http://www.w3schools.com/html/html_entities.asp
Si está pidiendo pestañas para alinear cosas en algunas líneas, puede usar <table>
poniendo cada línea en <tr> ... </tr>
y cada elemento dentro de esa línea en <td> ... </td>
y, por supuesto, siempre puedes controlar el relleno de cada celda de la tabla para ajustar el espacio entre ellos
esto los alineará y se verán muy bien :)
en casos en que el ancho / alto del espacio está más allá de
Usualmente uso
para espaciador horizontal:
<span style="display:inline-block; width: YOURWIDTH;"></span>
para espaciador vertical:
<span style="display:block; height: YOURHEIGHT;"></span>
prueba  
De acuerdo con los documentos en https://www.w3.org/MarkUp/html3/specialchars.html
Las entidades de personaje
 
y 
denotan un espacio en y un espacio em respectivamente, donde un espacio en es la mitad del tamaño del punto y un espacio em es igual al tamaño del punto de la fuente actual. Para las fuentes de tono fijo, el agente de usuario puede tratar el espacio en el espacio como equivalente a un carácter de espacio A, y el espacio de em como equivalente a dos caracteres de espacio.
<span style="padding-left:68px;"></span>
también puedes usar padding-left padding-right padding-top padding-bottom
<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>
La primera línea de este párrafo tendrá sangría de cinco caracteres, similar a una sangría tabulada
Vea aquí para más información