El <hr>
tiene un estilo predeterminado que lo coloca en una nueva línea. Sin embargo, ese estilo predeterminado puede anularse, de la misma manera que para cualquier otro elemento. <hr>
es en esencia nada más que un <div>
vacío con una configuración de borde predeterminada.
Para demostrar esto, pruebe lo siguiente:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
Hay un número de maneras para anular el estilo de <hr>
acheive su objetivo.
Puede intentar usar display:inline-block;
junto con una configuración width
, como ya he dicho anteriormente. El lado negativo de este enfoque es que requiere que conozca el ancho que desea, aunque hay formas de evitar esto - width:100%;
, y toda la línea en un contenedor <div>
que tiene overflow:hidden;
podría funcionar, por ejemplo:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Otra opción sería usar float:left;
.Debería aplicar esto a todos los elementos en la línea, y no me agrada esta opción, ya que me parece que float
tiende a causar más problemas de los que resuelve. Pero pruébalo y mira si funciona para ti.
Hay varias otras combinaciones de estilos que puede probar: pruébelo y vea qué funciona.
¿Cuál es el propósito de esta línea? La razón por la que aparece el HR a continuación (por defecto) es ese el punto completo: se supone que esa etiqueta indica un divisor. Si la línea que intentas lograr es simplemente decorativa, existen formas más apropiadas de abordar esto. (Disparo a continuación).) También hay un pequeño margen en esta pregunta para la interpretación; Es posible que desee agregar una imagen de exactamente qué es lo que quiere decir con "en la misma línea". –