133

Eu sei que existe um hr (regra horizontal) em html, mas não acredito que exista um vr (regra vertical). Estou errado e, se não, por que não existe uma regra vertical?

html Xaisoft
fonte

17

Esta é uma questão inoperante, mas com a especificação CSS3 agora disponível, você pode usar transform: rotate (90deg) para criar uma regra vertical e horizontal.

Jules

3

Se você usar o flexbox como linhas (exibição: flex; direção da flexão: linha;) os hrelementos se tornarão automaticamente verticais. Você só precisa definir sua heightpropriedade (por exemplo, height: 80%;).

Rodrigo Rodrigo

156

Não, não há regra vertical.

Não faz sentido lógico ter um. O HTML é analisado sequencialmente, o que significa que você expõe seu código HTML de cima para baixo, da esquerda para a direita como deseja que ele apareça de cima para baixo, da esquerda para a direita (geralmente)

Uma tag vr não segue esse paradigma.

Isso é fácil de usar usando CSS, no entanto. Ex:

<div style="border-left:1px solid #000;height:500px"></div>

Observe que você precisa especificar uma altura ou encher o contêiner com conteúdo.

Andy Baird
fonte

4

As tabelas podem separar itens verticalmente; portanto, o que você está dizendo não é o verdadeiro motivo para não haver uma tag vr.

CiscoIPPhone

6

Não foi por isso que as tabelas foram adicionadas à especificação HTML. As tabelas são para exibição de dados tabulados. Praticamente qualquer elemento HTML pode ser usado para itens separados verticalmente (qualquer coisa que você definido para display: block e float: left com qualquer conjunto de altura)

Andy Baird

19

erf. Eu estava tentando dizer que se as coisas já podem ser separadas verticalmente, como a adição de um vr não seguiria o paradigma de HTMLs?

CiscoIPPhone

4

@CiscoIPPhone - A separação vertical exigiria uma regra horizontal. A separação lateral exigiria uma regra vertical. Logo, Andy Baird está correto, eu acho.

Joshua

3

Não posso concordar que não siga o paradigma. Como você disse, ele é analisado sequencialmente, de cima para baixo, da esquerda para a direita. Você pode dividir o conteúdo que vai da esquerda para a direita com uma regra vertical. Nos dias anteriores do HTML, eu concordo que não faria sentido lógico. Agora, uma regra vertical é uma coisa frequentemente usada em html, mesmo que não exista uma tag semanticamente correta para ela. Apenas meus dois centavos.

Hendeca 24/05

37

Você pode fazer uma regra vertical como esta: <hr style="width: 1px; height: 20px; display: inline-block;">

mate
fonte

16

Conforme apontado por outros, o conceito de regra vertical não se encaixa nas idéias originais por trás da estrutura e apresentação dos documentos HTML. No entanto, hoje em dia (especialmente com a proliferação de aplicativos da web), existe um pequeno número de cenários em que isso seria realmente útil.

Por exemplo, considere um menu de navegação horizontal fixo na parte superior da tela, semelhante à barra de menus na maioria dos aplicativos GUI em janelas. Você tem vários itens de menu de nível superior organizados da esquerda para a direita que, quando clicados, abrem os menus suspensos. Anos atrás, era prática comum criar isso com uma tabela de linha única, mas esse HTML é ruim e é amplamente reconhecido que o caminho correto a seguir seria uma lista com CSS altamente personalizado.

Agora, suponha que você queira agrupar itens semelhantes, mas adicione um separador vertical entre os grupos, para obter algo assim:

[Item 1a] [Item 1b] | [Item 2a] [Item 2b]

O uso de <hr style="width: 1px; height: 100%; ..." />obras, mas pode ser considerado semanticamente incorreto, pois você está alterando para que serve esse elemento. Além disso, você não pode usá-lo em certos elementos nos quais o DTD HTML permite apenas elementos em nível de linha (por exemplo, dentro de um elemento).

Uma opção melhor seria , no entanto, nem todos os navegadores suportam a display: inline-block;propriedade CSS, portanto, a única opção real em nível de linha é usar uma imagem da seguinte forma:

<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />

Isso tem a vantagem adicional de ser compatível com navegadores somente de texto (como o lynx), pois o caractere de barra vertical é exibido em vez da imagem. (Ainda me incomoda que o M $ IE use incorretamente o texto alternativo como uma dica de ferramenta; é para isso que serve o atributo title!)

daiscog
fonte

8

<style type="text/css">
.vr
{
  display:inline;
  height:100%;
  width:1px;
  border:1px inset;
  margin:5px
}
</style>

<div style="font-size:50px">Vertical Rule: &rarr;<div class="vr"></div>&larr;</div>

Experimente.

Veniamin Ilmer
fonte

7

E se:

writing-mode:tb-rl

Onde superior-> inferior, direita-> esquerda?

Vamos precisar de uma regra vertical para isso.

vscpp
fonte

Este é um bom ponto. No entanto, isso significa renderizar a página de maneira não convencional, porque você precisa competir com todos os outros elementos no domínio. Você já reparou que às vezes existem diferenças de renderização entre os navegadores? ;) ~ No entanto, ponto muito bom .

precisa saber é o seguinte

7

Um <hr> dentro de uma tela: flex fará com que ela seja exibida verticalmente.

JSFiddle: https://jsfiddle.net/w6y5t1kL/

Exemplo:

<div style="display:flex;">
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
  <hr>
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
</div>

Nixinova
fonte

3

Não existe, para onde iria?

Use CSS para colocar uma borda à direita em um elemento, se você quiser algo assim.

Chad Birch
fonte

2

O HTML tem pouco ou nenhum posicionamento vertical devido à natureza tipográfica do layout do conteúdo. A Regra Vertical simplesmente não se encaixa em sua semântica.

myroslav
fonte

2

Experimente e você se conhecerá:

<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>

muhammad rokonuzzaman
fonte

2

você pode fazer de duas maneiras:

crie estilo como você já deu em div, mas mude a borda esquerda para a borda direita
tire uma imagem e faça sua largura 1-2 px

BoltClock
fonte

2

Pergunta antiga, mas eu resolvi isso com display:flex;e funciona muito bem:

<div style="display:flex;border:1px dotted black;margin-bottom:20px;">
    <div>
        This is a div
    </div>
    <div style="border-left:1px solid black;margin:0 7.5px;"></div>
    <div>
        This is another div
    </div>  
</div>

https://jsfiddle.net/6qfd59vm/3/

Esta solução também não requer altura fixa.

Tero Heiskanen
fonte

Solução do futuro, mas provavelmente não até 2017-18 + :)

jave.web

2

Tente isso.

Você pode definir altura e largura em " div ", como o escopo para " hr ".

A margem de " hr " é usada para o alinhamento.

<div style="display: inline-flex; width: 25px; height: 100px;">
  <hr style="margin: 0px 0px 0px 12.5px;">
</div>

Expandir snippet

Chung-Ming Wu
fonte

2

Sei que estou adicionando minha resposta muito tarde, mas valerá a pena. Você pode obter uma linha vertical usandoflex ehr

Veja meu código aqui .

Umesh
fonte

2

Antes tarde do que nunca!

precisa

1

No contexto de um item da lista sendo usado como navegação, uma tag <vr /> seria perfeitamente útil. A razão de não existir é porque "não faz sentido lógico ter um" no contexto do HTML há uma década.

joemaddalone
fonte

1

Para uso em email em HTML para a maioria dos clientes de desktop, você precisa usar tabelas. Nesse caso, você pode usar a <hr>tag, com o estilo em linha necessário (mas simples), como:

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

É claro que o estilo com CSS é mais flexível, mas o GMail e similares não permitem o uso de nenhum estilo CSS além do embutido ...

desko
fonte

1

Você pode usar css para simular uma linha vertical e usar a classe na div

.vhLine {
  border-left: thick solid #000000;
}

Yaina Villafañes
fonte

1

Você pode fazer isso muito facilmente

hr{
 transform: rotate(90deg);
}

<html>
<head>
</head>
<body>
<hr>
</body> 
</html>

Expandir snippet

Tenha cuidado com a altura e largura da hora

Nitish
fonte

1

Elementos personalizados em HTML5 (ou CSS puro)

1. javascript

Registre seu elemento.

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

*O - É 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 se mexer um pouco display:inline-block|inlineporqueinline nã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 personalizadas de fechamento automático.

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.

link para a resposta original no SO .

Qwerty
fonte

0

Você pode criar uma tag personalizada como tal:

<html>
<head>
<style>
vr {
display: inline-block;
// This is where you'd set the ruler color
background-color: black;
// This is where you'd set the ruler width
width: 2px;
//this is where you'd set the spacing between the ruler and surrounding text
margin: 0px 5px 0px 5px;
height: 100%;
vertical-align: top;
}
</style>
</head>
<body>
this is text <vr></vr> more text
</body>
</html>

(Se alguém souber como eu poderia transformar isso em uma tag "aberta", <hr>informe-me e eu a editarei)

SReject
fonte

Você pode colocá-lo como <vr />

curto

0

Não há tags em HTML, mas você pode usar |.

user3576467
fonte

0

Você pode usar a nova tag HTML5 SVG:

<svg style="position:absolute;width:100%;height:100%;">
    <line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
    </line>
</svg>

1,21 gigawatts
fonte

0

Acho fácil criar uma imagem de uma linha e depois inseri-la no código como uma "regra", definindo a largura e / ou a altura conforme necessário. Todas essas foram imagens de regra horizontal, mas não há nada que me impeça de usar uma imagem de "regra vertical".

Isso é legal por vários motivos; você pode usar diferentes linhas, cores ou padrões facilmente como "regras" e, como elas não teriam texto, mesmo que você a tenha feito da maneira "normal" usando hr em HTML, isso não deve afetar o SEO ou outras coisas como aquele. E o arquivo de imagem seria / deveria ser muito pequeno (no máximo 1 ou 2 KB).

Peter Jay
fonte

Você deve incluir código de exemplo para demonstrar a técnica que está sugerindo.

Adam Katz

0

Muitas respostas excessivamente complicadas. Basta criar uma tag TableData que abranja quantas linhas você deseja que ele use linhas. Em seguida, use a borda direita da barra real.

Exemplo:

<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid">&nbsp;</td>
<td rowspan="5">&nbsp;</td>

Verifique se o "& nbsp" na segunda linha executa a mesma quantidade de linhas que a primeira. para que haja um espaçamento adequado entre os dois.

Essa técnica me serviu bastante bem do meu tempo em HTML5.

Kevin Andrew Fogg
fonte

0

Hoje é possível com CSS3

hr {
  background-color:black;
  color:black;
  -webkit-transform:rotate(90deg);
  position:absolute;
  width:100px;
  height:2px;
  left:100px;
}

castiçal
fonte

0

Para pessoas que estão tentando criar colunas para texto, há uma propriedade de regra de coluna que você deve considerar usar!

.content{
  margin: 20px 5%;
  padding: 5px;
  
}
.content p{
  -webkit-column-count: 3;
  -moz-column-count:3;
  -o-column-count:3;
  column-count: 3; 
  -webkit-column-rule: 1px solid #ccc;
  -moz-column-rule: 1px solid #ccc;
  -o-column-rule: 1px solid #ccc;
  column-rule: 1px solid #ccc;
 
  text-align: justify;
}

<div class="content">
  <p>
    Lorizzle ipsum tellivizzle sit amizzle, consectetizzle adipiscing elit. Nullam away things, shizznit stuff, suscipizzle shiz, gravida vizzle, funky fresh. Doggy phat tortizzle. Check it out its fo rizzle. Bizzle izzle shizzle my nizzle crocodizzle dapibus turpizzle tempizzle i'm in the shizzle. Mauris gizzle nibh et ghetto. Vestibulum ass phat. Pellentesque eleifend nizzle nisi. Fo shizzle my shizz shiznit fo shizzle dizzle. Donec dapibus. That's the shizzle uhuh ... yih! urna, pretium eu, mattizzle cool, shit things, nunc. Fizzle suscipizzle. Shizzlin dizzle semper daahng dawg boofron bow wow wow.



  </p>
  
  
</div>

Expandir snippet

abe312
fonte

0

<div style="width:1px;background-color:red;height:30px;float:right;"></div>

Facilmente pode ser feito usando uma div como esta

Choxmi
fonte

-1

Não há.

Por quê? Provavelmente porque uma tabela com duas colunas funcionará.

OscarRyz
fonte

23

Porque as pessoas não acham que as tabelas devam ser usadas para isso (não diminuí o voto).

precisa saber é o seguinte

-2

Não, não há. E vou lhe contar uma pequena história sobre por que não é. Mas primeiro, soluções rápidas:

a) Use a classe CSS para elementos básicos span/ div, por exemplo :

.vr{ 
   display: inline-block; 
   vertical-align: middle; 
   /* note that height must be precise, 100% does not work in some major browsers */
   height: 100px; 
   width: 1px; 
   background-color: #000;
}

Demonstração de uso => https://jsfiddle.net/fe3tasa0/

b) Utilize uma borda unilateral e, possivelmente, o :first-childseletor CSS , se desejar aplicar divisores gerais entre os elementos irmãos / vizinhos.

A história sobre `<vr>` MONTAGEM no paradigma original,
mas ainda não estando lá:

Muitas respostas aqui sugerem que o divisor vertical não se encaixa no paradigma / abordagem HTML original ... isso é completamente errado. As respostas também se contradizem bastante.

Essas mesmas pessoas provavelmente estão chamando seu CSS class "clearfix" clara - não há nada a correção sobre flutuante, você está apenas limpá-lo ... Havia até mesmo um elemento em HTML3: <clear>. Infelizmente, isso e a folga da flutuação são um dos poucos equívocos comuns.

De qualquer forma. "Naquela época" em "idades originais HTML", não havia nenhum pensamento sobre algo como inline-block, havia pouco blocks, inlinesetables .

O último é realmente a razão pela qual <vr>não existe.
Naquela época, supunha-se que:
se você deseja dividir verticalmente algo e / ou criar mais blocos da esquerda para a direita =>
=> você está criando / deseja criar colunas =>
=> que implica a criação de uma tabela =>
= > tabelas têm bordas naturais entre suas células => não há razão para fazer uma<vr>

Essa abordagem ainda é válida, mas como o tempo mostrou, a sintaxe criada para as tabelas não é adequada para todos os casos, assim como para os estilos padrão.

Outra suposição, provavelmente mais tarde, foi que, se você não estiver criando uma tabela, provavelmente estará flutuando elementos de bloco . Isso significa que eles estão se unindo e, novamente, você pode definir uma borda , e esses dias provavelmente até usam o :first-childseletor que sugeri acima ...

jave.web
fonte

Existe um vr (regra vertical) em html?

Respostas:

Elementos personalizados em HTML5 (ou CSS puro)

1. javascript

2. css

3. instanciar

uso

Não quer mexer com javascript?

css

A história sobre `<vr>` MONTAGEM no paradigma original,
mas ainda não estando lá:

Existe um vr (regra vertical) em html?

Respostas:

Elementos personalizados em HTML5 (ou CSS puro)

1. javascript

2. css

3. instanciar

uso

Não quer mexer com javascript?

css

A história sobre <vr> MONTAGEM no paradigma original, mas ainda não estando lá:

A história sobre `<vr>` MONTAGEM no paradigma original,
mas ainda não estando lá: