Como você cria uma linha vertical usando HTML?

Coloque um <div>contorno na marcação onde deseja que a linha apareça a seguir e use CSS para estilizá-la:

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

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

Você pode usar a tag de regra horizontal para criar linhas verticais.

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

Usando largura mínima e tamanho grande, a regra horizontal se torna vertical.

Você pode usar um espaço vazio com <div>o estilo exatamente como deseja que a linha apareça:

HTML:

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

Com altura exata (substituindo o estilo em linha):

  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>

Estilize a borda se quiser uma aparência 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>

Você também pode experimentar combinações avançadas:

  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>

Você também pode criar uma linha vertical usando a linha horizontal HTML <hr />

html, body{height: 100%;}

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

<hr class="vertical" />

Não há vertical equivalente ao <hr>elemento. No entanto, uma abordagem que você pode querer tentar é usar uma borda simples à esquerda ou à direita do que estiver separando:

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

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

Elementos personalizados em HTML5 (ou CSS puro)

1. javascript

Registre seu elemento.

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

* -É obrigatório em todos os elementos personalizados.

2. css

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

* Você pode precisar mexer um pouco, display:inline-block|inlineporque inlinenão se expandirá para conter a altura do elemento. Use a margem para centralizar a linha dentro de um contêiner.

3. instanciar

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

* Infelizmente você não pode criar tags de fechamento automático personalizadas.

uso

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

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

Não quer mexer com javascript?

Simplesmente aplique esta classe CSS ao seu elemento designado.

css

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

* Veja as notas acima.

Uma outra opção é usar uma imagem de 1 pixel e definir a altura - essa opção permitirá que você a flutue para onde você precisa.

Não é a solução mais elegante.

Você pode desenhar uma linha vertical usando simplesmente altura / largura com qualquer elemento html.

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

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

Não há nenhuma tag para criar uma linha vertical em HTML.

1. Método: Você carrega uma imagem de linha. Então você define seu estilo como"height: 100px ; width: 2px"

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

Você pode usar a tag hr (linha horizontal) e girá-la 90 graus com css abaixo

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

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

Eu usei uma combinação do código "hr" sugerido e aqui está a aparência do meu código:

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

Simplesmente alterei o valor do valor "esquerdo" do pixel para posicioná-lo. Usei a linha vertical para alinhar o conteúdo da minha página da Web e depois a removi.

Para criar uma linha vertical centralizada dentro de uma div, acho que você pode usar esse código. O 'contêiner' pode ter 100% de largura, eu acho.

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 que não usar & # 124, que é o caractere especial html para |

Se seu objetivo é colocar linhas verticais em um contêiner para separar elementos filho lado a lado (elementos de coluna), considere estilizar o contêiner da seguinte maneira:

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

Isso adiciona uma borda esquerda a todos os elementos filhos, começando no segundo filho. Em outras palavras, você obtém bordas verticais entre filhos adjacentes.

• >é um seletor de filhos. Corresponde a qualquer filho do (s) elemento (s) especificado (s) à esquerda.
• *é um seletor universal. Corresponde a um elemento de qualquer tipo.
• :not(:first-child) significa que não é o primeiro filho de seus pais.

Suporte ao navegador: > *: primeiro filho e : não ()

Eu acho que isso é melhor do que um simples .child-except-first {border-left: ...} regra , porque faz mais sentido que as linhas verticais venham das regras do contêiner, não das regras dos diferentes elementos filhos.

Se isso é melhor do que usar um elemento de regra vertical improvisado (estilizando uma regra horizontal, etc.) dependerá do seu caso de uso, mas essa é uma alternativa, pelo menos.

Mais uma abordagem é possível: usando SVG .

por exemplo :

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

Prós:

• Você pode ter linhas de qualquer comprimento e orientação.
• Você pode especificar a largura, cor facilmente

Contras:

• Agora, o SVG é suportado nos navegadores mais modernos. Mas alguns navegadores antigos (como o IE 8 e anteriores) não são compatíveis.

Linha vertical à direita da 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>
  

Linha vertical deixada para a 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 adicionar uma linha vertical, você precisa estilizar uma hora.

Agora, quando você cria uma linha vertical, ela aparece no meio da página:

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

Agora, para colocá-lo onde quiser, você pode usar este código:

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

Isto irá posicioná-lo para a esquerda, você pode inverter para posicioná-lo para a direita.

No elemento Anterior após o qual você deseja aplicar a linha vertical, é possível definir CSS ...

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

Gire <hr>90 graus:

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

Existe uma <hr>etiqueta para a linha horizontal. Pode ser usado com CSS para criar linhas horizontais também:

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

<hr class="divider">

A propriedade width determina a espessura da linha. A propriedade height determina o comprimento da linha. A propriedade background-color determina a cor da linha.

Para um estilo embutido, usei este código:

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

e que o posicionou diretamente no centro.

Como eu precisava de uma linha vertical embutida, passei um botão para que se tornasse uma linha.

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

Isso funcionou muito bem para mim

Para fazer a linha vertical centralizar no meio, use:

position: absolute; 
left: 50%;