Me gustaría tener una línea que comienza justo después de mi texto en la misma línea, he probado con el siguiente código simplelínea justo después de texto
<html><body>My Text<hr/></body></html>
Parece que <hr> no es una opción porque siempre está en una nueva línea y me gustaría que la línea comience a la derecha de mi texto.
¿Algún ayuda?
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
¿Qué tipo de sentido tiene?
<p>My text</p>
<hr />
Prueba esto:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
La línea CSS float: right se mantenga en la misma línea que el texto. Tendrá que ajustar el width si desea que ocupe el resto de la línea.
Usando inline o float, por lo que he probado, no funciona correctamente, incluso si esto fue lo primero que pensé. Mirando más he utilizado el siguiente CSS
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
demostraciónhttp://jsfiddle.net/mFEWk/
Lo que hice, es añadir la posición relativa de los dos elementos (que me diera la ventaja de uso z-index). También desde el momento en que tuve position:relative para hr lo moví del bottom:17px. Esto lo mueve por encima del div que contiene el texto. La aplicación de los valores z-index y la adición de background:white para el div coloca el texto sobre la línea. Por supuesto, no se olvide de usar un width para el texto, de lo contrario tomará todo el ancho del elemento principal.
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.
@Nikko Esto funciona bien. Debe ser aceptado como la respuesta. –
Aquí hay un enfoque potencial, pero tiene algunas suposiciones/requisitos. Su pregunta debe ser editada para brindarle información más específica sobre lo que está creando.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
que utilizó la siguiente técnica:
Dale una imagen de fondo del contenedor div con una línea horizontal. Poner un elemento (como) en el contenedor div (lo tengo en la derecha de modo float: right;)
Utilice el siguiente CSS:
.line-container { width: 550px; margin-top: 10px; background-image: url('/images/horizontal_line.png'); height: 40px; }
.line-container h3 { float: right; background-color: white; padding-left: 10px; }
Usando FlexBox Propiedad esto se puede lograr fácilmente.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div><div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">Exactamente lo que quieres.
Pruebe esto. Funciona
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
También puede usar esto para trazar una línea entre los textos como
Hola ------------------------ - Hola
El OP nunca especificó el propósito de la línea, pero quería compartir lo que terminé haciendo cuando estaba creando una plantilla html donde el usuario necesitaba una línea para escribir después de imprimir el documento.
Como la etiqueta hr se establece de manera predeterminada en su propia línea y su valor predeterminado es centrado en la línea, decidí usar un div y darle un estilo en su lugar.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
jsFiddle demostración
Espero que ayude a cualquiera que tenga el mismo objetivo que yo.
¿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". –