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

Coloque un <div>marcado alrededor del lugar donde desea que aparezca la línea a continuación y use CSS para darle estilo:

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

<div class="verticalLine">
  some other content
</div>

Puede usar la etiqueta de regla horizontal para crear líneas verticales.

<hr width="1" size="500">

Al usar un ancho mínimo y un gran tamaño, la regla horizontal se convierte en vertical.

Puede usar un espacio vacío con el <div>mismo estilo que desea que aparezca la línea:

HTML:

<div class="vertical-line"></div>

Con altura exacta (estilo superior en línea):

  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 */
    }

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

Diseñe el borde si desea 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 */
    }

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

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

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

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

También puede hacer una línea vertical usando la línea horizontal HTML <hr />

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}

<hr class="vertical" />

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

#your_col {
  border-left: 1px solid black;
}

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

Elementos personalizados HTML5 (o CSS puro)

1. javascript

Registra tu elemento.

var vr = document.registerElement('v-r'); // vertical rule please, yes!

* El -es obligatorio en todos los elementos personalizados.

2. css

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

* Es posible que deba jugar un poco display:inline-block|inlineporque inlineno se expandirá a la altura del elemento contenedor. Use el margen para centrar la línea dentro de un contenedor.

3. instanciar

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

* Desafortunadamente no puedes crear etiquetas personalizadas de cierre automático.

uso

 <h1>THIS<v-r></v-r>WORKS</h1>

ejemplo: http://html5.qry.me/vertical-rule

¿No quieres meterte con JavaScript?

Simplemente aplique esta clase CSS a su elemento designado.

css

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

* Ver notas arriba.

Otra opción es usar una imagen de 1 píxel y establecer la altura; esta opción le permitiría flotar a donde necesita estar.

Sin embargo, no es la solución más elegante.

Puede dibujar una línea vertical simplemente usando la altura / anchura con cualquier elemento html.

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}

<div id="verticle-line"></div>

No hay ninguna etiqueta para crear una línea vertical en HTML.

1. Método: carga una imagen de línea. Luego estableces su estilo como"height: 100px ; width: 2px"

2. Método: puedes usar <td>etiquetas<td style="border-left: 1px solid red; padding: 5px;"> X </td>

Puede usar la etiqueta hr (línea horizontal) y luego rotarla 90 grados con css a continuación

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

Utilicé una combinación del código "hr" sugerido, y así es como se ve mi código:

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

Simplemente cambié el valor del valor de píxel "izquierdo" para posicionarlo. (Usé la línea vertical para alinear contenido en mi página web, y luego lo eliminé).

Para crear una línea vertical centrada dentro de un div, creo que puedes usar este código. El 'contenedor' bien puede ser del 100% de ancho, supongo.

div.container {
  width: 400px;
}

div.vertical-line {
  border-left: 1px solid #808080;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}

<div class="container">
  <div class="vertical-line">&nbsp;</div>
</div>

¿Por qué no usar & # 124, que es el carácter especial html para |

Si su objetivo es poner líneas verticales en un contenedor para separar elementos secundarios (elementos de columna), puede considerar diseñar el contenedor de esta manera:

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

Esto agrega un borde izquierdo a todos los elementos secundarios a partir del segundo elemento secundario. En otras palabras, obtienes bordes verticales entre los niños adyacentes.

• >es un selector de niños. Coincide con cualquier elemento secundario de los elementos especificados a la izquierda.
• *Es un selector universal. Coincide con un elemento de cualquier tipo.
• :not(:first-child) significa que no es el primer hijo de su padre.

Soporte del navegador: > *: primer hijo y : no ()

Creo que esto es mejor que un simple .child-except-first {border-left: ...} regla, porque tiene más sentido que las líneas verticales provengan de las reglas del contenedor, no de las reglas de los diferentes elementos secundarios.

Si esto es mejor que usar un elemento de regla vertical improvisado (al diseñar una regla horizontal, etc.) dependerá de su caso de uso, pero al menos esta es una alternativa.

Es posible un enfoque más: usar SVG .

p.ej :

<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</svg>

Pros:

• Puede tener una línea de cualquier longitud y orientación.
• Puede especificar el ancho, color fácilmente

Contras :

• SVG ahora es compatible con la mayoría de los navegadores modernos. Pero algunos navegadores antiguos (como IE 8 y versiones anteriores) no lo admiten.

Línea vertical derecha al div

    <div style="width:50%">
        <div style="border-right:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

Línea vertical izquierda al div.

    <div style="width:50%">
        <div style="border-left:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

Para agregar una línea vertical necesita diseñar un hr.

Ahora, cuando haces una línea vertical, aparecerá en el medio de la página:

<hr style="width:0.5px;height:500px;"/>

Ahora, para ponerlo donde quieras, puedes usar este código:

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

Esto lo colocará a la izquierda, puede invertirlo para colocarlo a la derecha.

Hay una <hr>etiqueta para la línea horizontal. Se puede usar con CSS para hacer una línea horizontal también:

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}

<hr class="divider">

La propiedad de ancho determina el grosor de la línea. La propiedad de altura determina la longitud de la línea. La propiedad de color de fondo determina el color de la línea.

En el elemento Anterior después del cual desea aplicar la fila vertical, puede establecer CSS ...

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

Girar <hr>90 grados:

<hr style="width:100px; transform:rotate(90deg);">

Para un estilo en línea utilicé este código:

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

y eso lo colocó directamente en el centro.

Necesitaba una línea vertical en línea, así que engañé un botón para que se convirtiera en una línea.

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

<div style="width:1px;background-color:#C0C0C0;"></div>

Esto funciono muy bien para mi

Para hacer que la línea vertical se centre en el medio use:

position: absolute; 
left: 50%;