texto - Alinee<hr> a la izquierda de forma compatible con HTML5

hr with text

Question

Actualmente estoy usando

<hr align="left" />

en mi página de HTML5, pero he leído que la propiedad align estaba en desuso en XHTML 4.01 y supuestamente eliminada de HTML5. Me gustaría usar CSS en lugar de un atributo en línea como este, pero cuando lo intenté

hr{align: left; max-width: 800px;}

o hr{text-align: left;} o hr{left: 0;} o hr{float: left;} , simplemente apareció en el centro.

Entonces, ¿qué debo usar en lugar del atributo en línea anterior?

Answer 1

Está intentando usar algo de una manera que (como menciona Eliezer Bernart ... y aparentemente ese comentario con el enlace al documento de MDN desapareció) ya no "funciona de esa manera". Puede, siempre y cuando no le importe que sea un error en IE, simplemente establezca el margen en cero - http://jsfiddle.net/s52wb/

hr {
max-width: 100px;
margin: 0px;
}

Sin embargo, una mejor idea sería imitar la antigua forma de hacer las cosas de los RR.HH. a través de CSS sin el uso de la RRHH. Echa un vistazo a http://jsfiddle.net/p5ax9/1/ para una demostración:

p:first-child:before {
display: none;
}
p:before {
content: " ";
border: 1px solid black;
margin-top: 15px;
margin-bottom: 15px;
display: block;
max-width: 100px;
}

Answer 2

No sé qué navegadores se usaron para algunas de las respuestas anteriores, pero no encontré text-align:left ni margin-left:0 funcionó en IE (11, modo Estándar, HTML5) y Firefox (29).

• IE11: text-align:left trabajos a la text-align:left , margin-left:0 deja la regla centrada.

• FF: margin-left:0 trabajos, text-align:left deja la regla centrada.

• Entonces, o use ambos, o encontré ese margin-right:100% funciona para ambos!

Answer 3

Puedes usar la etiqueta div en su lugar.

<div style="border: thin solid lightgray; width: 100px;"></div>

Answer 4

Si está utilizando Bootstrap, podría agregar una clase col-*-offset-0 . Por ejemplo:

<hr class="col-xs-offset-0 col-sm-offset-0 col-md-offset-0" />

Internamente Bootstrap agrega un margin-left:0; .

Answer 5

Una opción sería establecer el margen izquierdo en cero:

hr{max-width: 800px; margin-left:0;}

Answer 6

hacer esto

hr {
display: inline; //or inline-block
text-align: left;
}