é fácil o suficiente para inserir ou desenhar uma linha horizontal em html. Mas como se desenha uma linha vertical em html? Ao contrário da linha horizontal, não há uma única marca no html que irá desenhar a linha vertical. Mas isso não significa que seja impossível fazê-lo.
usando CSS
uma maneira de fazer isso é usar as tags html com folhas de estilo em cascata ou CSS.
usaremos a tag div em html para desenhar um bloco na página. Na etiqueta div, você pode usar a propriedade border-left ou border-right para desenhar os limites do bloco. Combinado com a propriedade altura do div, você vai acabar desenhando uma linha vertical do comprimento desejado.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- altura: a altura pode ser usada para indicar o comprimento da linha na página.
- border-left: este é o tipo de linha que você gosta. o exemplo é uma linha preta sólida de 2 pixels de espessura. Você pode ter linhas cortadas ou uma linha muito mais grossa.
- posição e esquerda: estes dois em conjunto indicam onde na página você precisa da linha alinhada horizontalmente. Qualquer um dos atributos que irão colocar o div apropriadamente pode ser usado para posicionar a linha na página
a saída do código acima irá mostrar como uma linha vertical preta sólida no meio da página.existem várias combinações diferentes que são possíveis. Por exemplo, você pode usar ambas as propriedades border-left E border-right juntas para desenhar duas linhas verticais lado a lado. Certifique-se de especificar a largura do div se estiver a desenhar duas linhas. Isso irá determinar a distância entre as duas linhas verticais.
pode variar o tamanho ou a espessura da linha usando a contagem de pixels. Quase todas as variações que você pode usar para desenhar uma linha horizontal pode ser usado para desenhar a linha vertical também.
Usando uma marca de contentor como div também lhe dará a capacidade de desenhar uma linha vertical ao lado de um bloco de texto, se é isso que precisa. A utilização de uma marca de contentor dá-lhe a flexibilidade para desenhar não só linhas verticais, mas também linhas horizontais em torno do texto. Para fazer algo assim:
<div style="border-left: 2px solid black; border-right: 2px dashed green; width: 70em;"> <div style="padding-left: 2em;"> <p>The output of the above code will display as a solid black vertical line in the middle of the page.</p> <p>There are several different combinations that are possible. For example, you can use both the border-left and the border-right properties together to draw two vertical lines side by side. Be sure to specify the width of the div if you are drawing two lines. That will determine the distance between the two vertical lines.</p> <p>You can vary the size or thickness of the line using the pixel count. Almost all variations that you can use to draw a horizontal line can be used to draw the vertical line as well.</p> </div></div>
eu tenho usado o atributo de estilo inline nos exemplos aqui, mas o ideal seria usar uma folha de estilo externa e você pode re-utilizar estes com o atributo de classe. Isso lhe dará a capacidade de ter uma aparência consistente e sentir em todas as suas páginas web.
usando a marca hr
a marca HTML para Inserir linha horizontal é a marca hr. Você pode usar a mesma marca para inserir a linha vertical também, mas você ainda vai precisar especificar a largura e o tamanho para formatar a linha. Então, tudo que você provavelmente está fazendo é usar a tag hr em vez da tag div no exemplo anterior.
ainda assim, pode ser bastante simples de usar se você não precisa de qualquer formatação de fantasia. Você especifica o atributo width para definir a espessura da linha e o atributo size para especificar o comprimento ou a altura da linha.
<hr width="1" size="300"/>
Usando o div dar-lhe-á muito mais flexibilidade no controlo do tamanho e tipo de linha que deseja desenhar, bem como no desenho de várias linhas. Bem, você poderia desenhar a linha horizontal da mesma forma, usando as propriedades de borda-superior ou borda-inferior em vez da esquerda e direita que tínhamos usado.