343 votos

Cómo hacer una línea vertical en HTML

¿Cómo se hace una línea vertical con HTML?

558voto

XIII Puntos 8731

Pon un div alrededor del marcado donde quieres que la línea aparezca a continuación y usa CSS para darle estilo:

<div class="verticalLine">

some other content

</div>

en el CSS:

.verticalLine {
    border-left: thick solid #ff0000;
}

239voto

Anthony Puntos 751

Puedes usar la etiqueta de la regla horizontal para crear líneas verticales. <hr width="1" size="500"> Usando un ancho mínimo y un gran tamaño, la regla horizontal se convierte en una regla vertical.

73voto

awe Puntos 9697

Puedes usar un <div> que tiene el mismo estilo que quieres que aparezca la línea:

HTML:

<div class="vertical-line" />

Con la altura exacta (estilo predominante en línea):

<div class="vertical-line" style="height: 45px;" />

CSS:

div.vertical-line{
  width: 1px; /* Line width */
  background-color: black; /* Line color */
  height: 100%; /* Override in-line if you want specific height. */
  float: left; /* Causes the line to float to left of content. 
    You can instead use position:absolute or display:inline-block
    if this fits better with your design */
}

Estiliza el borde si quieres un aspecto 3D:

div.vertical-line{
  width: 0px; /* Use only border style */
  height: 100%;
  float: left; 
  border: 1px inset; /* This is default border style for <hr> tag */
}

Por supuesto, también puedes experimentar con combinaciones avanzadas:

div.vertical-line{
  width: 1px;
  background-color: silver;
  height: 100%;
  float: left;
  border: 2px ridge silver ;
  border-radius: 2px;
}

20voto

Daniel Vassallo Puntos 142049

No existe un equivalente vertical a la <hr> elemento. Sin embargo, un enfoque que puede intentar es utilizar un simple borde a la izquierda o a la derecha de lo que se está separando:

<style type="text/css">
   #your_col {
      border-left: 1px solid black;
   }
</style>

<div id="your_col">
   Your content here
</div>

9voto

chris Puntos 10694

Otra opción es usar una imagen de 1 píxel, y establecer la altura - esta opción te permitiría flotar hasta donde necesites.

Aunque no es la solución más elegante.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X