133

Sé que hay una hr (regla horizontal) en html, pero no creo que haya una vr (regla vertical). ¿Me equivoco y si no, por qué no hay una regla vertical?

html Xaisoft
fuente

17

Esta es una pregunta muerta, pero con la especificación CSS3 ahora disponible, podría usar transform: rotate (90deg) para hacer una regla vertical y horizontal.

Jules

3

Si usa flexbox como filas (display: flex; flex-direction: row;), los hrelementos se volverán verticales automáticamente. Solo necesita establecer su heightpropiedad (por ejemplo, altura: 80%;).

Rodrigo

156

No, no hay una regla vertical.

No tiene sentido lógico tener uno. El HTML se analiza secuencialmente, lo que significa que diseñas tu código HTML de arriba a abajo, de izquierda a derecha como quieres que aparezca de arriba a abajo, de izquierda a derecha (en general)

Una etiqueta vr no sigue ese paradigma.

Sin embargo, esto es fácil de hacer usando CSS. Ex:

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

Tenga en cuenta que debe especificar una altura o llenar el contenedor con contenido.

Andy Baird
fuente

44

Las tablas pueden separar elementos verticalmente, por lo que lo que está diciendo no es la verdadera razón por la que no hay una etiqueta vr.

CiscoIPPhone el

66

Por eso no se agregaron tablas a la especificación HTML. Las tablas son para mostrar datos tabulados. Casi cualquier elemento HTML se puede usar para separar elementos verticalmente (cualquier cosa que establezca para mostrar: bloquear y flotar: izquierda con cualquier altura establecida)

Andy Baird

19

erf. Estaba tratando de decir que si las cosas ya se pueden separar verticalmente, ¿cómo agregar un vr no seguiría el paradigma de HTML?

CiscoIPPhone

44

@CiscoIPPhone: la separación vertical requeriría una regla horizontal. La separación lateral requeriría una regla vertical. Ergo, Andy Baird tiene razón, creo.

Joshua

3

No puedo aceptar que no siga el paradigma. Como dijiste, se analiza secuencialmente, de arriba abajo, de izquierda a derecha. Puede dividir el contenido que va de izquierda a derecha con una regla vertical. En días anteriores de HTML, estoy de acuerdo en que no habría tenido sentido lógico. Ahora, una regla vertical es algo que se usa con frecuencia en html, a pesar de que no hay una etiqueta semánticamente correcta para ello. Solo mis dos centavos.

Hendeca

37

Puedes hacer una regla vertical como esta: <hr style="width: 1px; height: 20px; display: inline-block;">

mate
fuente

16

Como señalaron otros, el concepto de una regla vertical no encaja con las ideas originales detrás de la estructura y la presentación de los documentos HTML. Sin embargo, en estos días (especialmente con la proliferación de aplicaciones web) hay una pequeña cantidad de escenarios en los que esto sería realmente útil.

Por ejemplo, considere un menú de navegación horizontal fijo en la parte superior de la pantalla, similar a la barra de menú en la mayoría de las aplicaciones GUI con ventana. Tiene varios elementos de menú de nivel superior dispuestos de izquierda a derecha, que al hacer clic en abrir menús desplegables. Hace años, era una práctica común crear esto con una tabla de una sola fila, pero este es un HTML incorrecto y es ampliamente reconocido que la forma correcta de hacerlo sería una lista con CSS muy personalizado.

Ahora, digamos que desea agrupar elementos similares, pero agregue un separador vertical entre grupos, para lograr algo como esto:

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

Usando <hr style="width: 1px; height: 100%; ..." />trabajos, pero puede considerarse semánticamente incorrecto ya que está cambiando para qué sirve realmente ese elemento. Además, no puede usar esto dentro de ciertos elementos donde el DTD HTML solo permite elementos de nivel en línea (por ejemplo, dentro de un elemento).

Una mejor opción sería , sin embargo, no todos los navegadores admiten la display: inline-block;propiedad CSS, por lo que la única opción real de nivel en línea es usar una imagen como esta:

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

Esto tiene la ventaja adicional de ser compatible con navegadores de solo texto (como lynx) ya que el carácter de la barra se muestra en lugar de la imagen. (Todavía me molesta que M $ IE use incorrectamente el texto alternativo como información sobre herramientas; ¡para eso está el atributo de título!)

daiscog
fuente

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>

Pruébalo.

Veniamin Ilmer
fuente

7

Qué tal si:

writing-mode:tb-rl

Donde arriba-> abajo, derecha-> izquierda?

Necesitaremos una regla vertical para esto.

vscpp
fuente

Ese es un buen punto. Sin embargo, significa representar la página de una manera poco convencional porque tienes que competir con todos los demás elementos en el dom. ¿Alguna vez has notado que a veces hay diferencias de representación entre los navegadores? ;) ~ Sin embargo, muy buen punto .

jcolebrand

7

Un <hr> dentro de una pantalla: flex hará que se muestre verticalmente.

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

Ejemplo:

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

3

No hay, ¿a dónde iría?

Use CSS para colocar un borde derecho en un elemento si desea algo así.

Abedul Chad
fuente

2

HTML tiene poco o ningún posicionamiento vertical debido a la naturaleza tipográfica del diseño del contenido. La regla vertical simplemente no se ajusta a su semántica.

myroslav
fuente

2

Pruébalo y te conocerás a ti mismo:

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

2

puedes hacer de 2 maneras:

crea el estilo como ya diste en div pero cambia borde-izquierda a borde-derecha
tomar una imagen y hacer su ancho 1-2 px

BoltClock
fuente

2

Pregunta antigua pero resolví esto display:flex;y funciona muy bien:

<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 solución tampoco requiere altura fija.

Tero Heiskanen
fuente

Solución del futuro, pero probablemente no hasta 2017-18 + :)

jave.web

2

Prueba esto.

Puede establecer la altura y el ancho en " div ", como el alcance de " hr ".

El margen de " hr " se utiliza para la alineación.

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

Expandir fragmento

Chung-Ming Wu
fuente

2

Sé que estoy agregando mi respuesta muy tarde, pero valdría la pena, estoy seguro. Puede lograr la línea vertical usando flexyhr

Ver mi codepen aquí .

Umesh
fuente

2

¡Mejor tarde que nunca!

Jry9972

1

En el contexto de un elemento de la lista que se utiliza como navegación, una etiqueta <vr /> sería perfectamente útil. La razón por la que no existe es porque "no tiene sentido lógico tener uno" en el contexto de HTML hace una década.

joemaddalone
fuente

1

Para usar en el correo electrónico HTML para la mayoría de los clientes de escritorio, debe usar tablas. En este caso, puede usar la <hr>etiqueta, con el estilo en línea necesario (pero simple), como:

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

Por supuesto que el estilo con CSS es más flexible, pero GMail y similares no permiten el uso de ningún estilo CSS que no sea en línea ...

desko
fuente

1

Puede usar css para simular una línea vertical y usar la clase en el div

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

Yaina Villafañes
fuente

1

Puedes hacer esto muy fácilmente

hr{
 transform: rotate(90deg);
}

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

Expandir fragmento

Tenga cuidado con la altura y el ancho de hora

Nitish
fuente

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

* Lamentablemente, no puede 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.

enlace a la respuesta original en SO .

QWERTY
fuente

0

Puede crear una etiqueta 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>

(Si alguien sabe cómo podría convertir esto en una etiqueta "abierta", por <hr>favor , hágamelo saber y lo editaré)

SReject
fuente

Podrías <vr />

ponerle una

0

No hay etiqueta en HTML, pero puede usar |.

usuario3576467
fuente

0

Puede usar la nueva etiqueta 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 gigavatios
fuente

0

Me resulta fácil hacer una imagen de una línea y luego insertarla en el código como una "regla", estableciendo el ancho y / o la altura según sea necesario. Todas estas han sido imágenes de reglas horizontales, pero no hay nada que me impida (o a usted) usar una imagen de "regla vertical".

Esto es genial por muchas razones; puede usar diferentes líneas, colores o patrones fácilmente como "reglas", y dado que no tendrían texto, incluso si lo hubiera hecho de la manera "normal" usando hr en HTML, no debería afectar el SEO u otras cosas como ese. Y el archivo de imagen debería / debería ser muy pequeño (1 o 2 KB como máximo).

Peter Jay
fuente

Debe incluir un código de muestra para demostrar la técnica que sugiere.

Adam Katz

0

Demasiadas respuestas demasiado complicadas. Simplemente haga una etiqueta TableData que abarque la cantidad de filas que desea que use utilizando la lista de filas. Luego use el borde derecho para la barra real.

Ejemplo:

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

Asegúrese de que "& nbsp" en la segunda línea ejecuta la misma cantidad de líneas que la primera. para que haya un espacio adecuado entre ambos.

Esta técnica me ha servido bastante bien con mi tiempo en HTML5.

Kevin Andrew Fogg
fuente

0

Hoy es posible con CSS3

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

candelero
fuente

0

Para las personas que intentan hacer columnas para texto, ¡hay una propiedad de regla de columna que debes 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 fragmento

abe312
fuente

0

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

Se puede hacer fácilmente usando un div como este

Choxmi
fuente

-1

No hay.

¿Por qué? Probablemente porque una tabla con dos columnas servirá.

OscarRyz
fuente

23

Debido a que la gente no piensa que las tablas deberían usarse para esto (no voté en contra).

erikkallen

-2

No no hay. Y te contaré una pequeña historia sobre por qué no es así. Pero primero, soluciones rápidas:

a) Use la clase CSS para elementos básicos span/ div, por ejemplo ::

.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;
}

Demostración de uso => https://jsfiddle.net/fe3tasa0/

b) Utilice un borde de un solo lado y posiblemente un :first-childselector CSS si desea aplicar un separador general entre los elementos hermanos / vecinos.

La historia sobre `<vr>` FITTING en el paradigma original,
pero aún no está allí:

Muchas respuestas aquí sugieren que el divisor vertical no se ajusta al paradigma / enfoque HTML original ... eso es completamente incorrecto. También las respuestas se contradicen mucho.

Esas mismas personas probablemente están llamando a su clara clase "clearfix" CSS - no hay nada que arreglar acerca flotante, se le acaba de borrarlo ... Hubo incluso un elemento en HTML3: <clear>. Lamentablemente, esto y la eliminación de la flotación es uno de los pocos conceptos erróneos comunes.

De todas formas. "En aquel entonces" en las "edades HTML originales", no se pensaba en algo como inline-block, simplemente blocks, inlinesy tables.

El último es en realidad la razón por la cual <vr> cual no existe.
En aquel entonces se suponía que:
si desea dividir verticalmente algo y / o hacer más bloques de izquierda a derecha =>
=> está haciendo / quiere hacer columnas =>
=> eso implica que está creando una tabla =>
= > las tablas tienen bordes naturales entre sus celdas => no hay razón para hacer un<vr>

Este enfoque todavía es válido, pero como lo demostró el tiempo, la sintaxis hecha para tablas no es adecuada para todos los casos, así como sus estilos predeterminados.

Otra suposición, probablemente más tarde, fue que si no está creando una tabla, probablemente esté flotando elementos de bloque . Eso significa que se están pegando unidos , y de nuevo, puede establecer un borde , y esos días probablemente incluso utilicen el :first-childselector que sugerí anteriormente ...

jave.web
fuente

¿Hay un vr (regla vertical) en html?

Respuestas:

Elementos personalizados HTML5 (o CSS puro)

1. javascript

2. css

3. instanciar

uso

¿No quieres meterte con JavaScript?

css

La historia sobre `<vr>` FITTING en el paradigma original,
pero aún no está allí:

¿Hay un vr (regla vertical) en html?

Respuestas:

Elementos personalizados HTML5 (o CSS puro)

1. javascript

2. css

3. instanciar

uso

¿No quieres meterte con JavaScript?

css

La historia sobre <vr> FITTING en el paradigma original, pero aún no está allí:

La historia sobre `<vr>` FITTING en el paradigma original,
pero aún no está allí: