tiempo - Cómo hacer una línea vertical en HTML

linea vertical html css

Question

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

Answer 1

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 con la display:inline-block|inline porque inline no se expandirá hasta que contenga la altura del elemento. Usa el margen para centrar la línea dentro de un contenedor.

3. crear una instancia

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 anteriores.

Answer 2

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

Answer 3

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

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

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

Answer 4

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;

Answer 5

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

1. Método: Carga una imagen de línea. A continuación, establece su estilo como "height: 100px ; width: 2px"

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

Answer 6

No hay vertical equivalente al elemento <hr> . Sin embargo, un enfoque que puede querer probar es usar un borde simple a la izquierda o derecha de lo que sea que esté separando:

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

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

Answer 7

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

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

Answer 8

Para agregar una línea vertical necesita un estilo de una hora.

Ahora cuando hagas 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 posicionará a la izquierda, puede invertirlo para posicionarlo a la derecha.

Answer 9

Para crear una línea vertical centrada dentro de un div, creo que puedes usar este código. El ''contenedor'' bien puede ser 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>

Answer 10

Para hacer la línea vertical para centrar en el uso medio:

position: absolute; 
left: 50%;

Answer 11

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 posicionó directamente en el centro.

Answer 12

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

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

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

Answer 13

Puede usar la etiqueta hr (línea horizontal) y luego girarla 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/

Answer 14

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

HTML:

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

Con altura exacta (anulando estilo 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>

Da estilo al borde si quieres un look 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 puedes 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>

Answer 15

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

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

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

Answer 16

Si su objetivo es colocar líneas verticales en un contenedor para separar elementos secundarios lado a lado (elementos de columna), podría considerar el estilo del contenedor así:

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

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

• > es un selector de niños. Coincide con cualquier hijo del elemento (s) especificado 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 :not()

Creo que esto es mejor que una simple .child-except-first {border-left: ...} , 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.

Answer 17

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

html, body{height: 100%;}

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

<hr class="vertical" />

Answer 18

Un enfoque más es posible: 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:

• Puedes tener 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.

Answer 19

Utilicé una combinación del código "hr" sugerido, y esto es lo que parece mi código:

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

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

Answer 20

Línea vertical derecha a la 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 a la 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>