133

So che esiste un hr (regola orizzontale) in html, ma non credo ci sia un vr (regola verticale). Sbaglio e, in caso contrario, perché non esiste una regola verticale?

html

— Xaisoft
fonte

17

Questa è una domanda morta, ma con le specifiche CSS3 ora disponibili, puoi usare transform: rotate (90deg) per creare una regola verticale orizzontale.

— Jules,

3

Se si utilizza la flexbox come righe (display: flex; flex-direction: row;) gli hrelementi diventeranno automaticamente verticali. Devi solo impostare la sua heightproprietà (es. Altezza: 80%;).

— Rodrigo,

156

No, non esiste una regola verticale.

Non ha senso logico averne uno. L'HTML viene analizzato in sequenza, il che significa che disponi il tuo codice HTML dall'alto verso il basso, da sinistra a destra come vuoi che appaia dall'alto verso il basso, da sinistra a destra (in generale)

Un tag vr non segue quel paradigma.

Questo è facile da fare usando i CSS, tuttavia. Ex:

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

Si noti che è necessario specificare un'altezza o riempire il contenitore di contenuto.

— Andy Baird
fonte

4

Le tabelle possono separare gli elementi verticalmente, quindi quello che stai dicendo non è la vera ragione per cui non esiste un tag vr.

— CiscoIPPhone

6

Non è per questo che le tabelle sono state aggiunte alle specifiche HTML. Le tabelle sono per la visualizzazione di dati tabulati. Quasi ogni elemento HTML può essere utilizzato per separare gli oggetti in verticale (tutto ciò che si imposta per visualizzare: blocco e float: a sinistra con qualsiasi altezza impostata)

— Andy Baird

19

FER. Stavo cercando di dire che se le cose potessero già essere separate verticalmente, come aggiungerebbe un vr non seguirebbe il paradigma HTML?

— CiscoIPPhone il

4

@CiscoIPPhone - La separazione verticale richiederebbe una regola orizzontale. La separazione laterale richiederebbe una regola verticale. Ergo, Andy Baird ha ragione, penso.

— Giosuè,

3

Non posso essere d'accordo sul fatto che non segue il paradigma. Come hai detto, viene analizzato in sequenza, dall'alto verso il basso, da sinistra a destra. Puoi dividere il contenuto che va da sinistra a destra con una regola verticale. Nei primi giorni di HTML sono d'accordo che non avrebbe avuto senso logico. Ora una regola verticale è una cosa spesso usata in HTML, anche se non esiste un tag semanticamente corretto per esso. Solo i miei due centesimi.

— Hendeca,

37

Puoi creare una regola verticale come questa: <hr style="width: 1px; height: 20px; display: inline-block;">

— opaco
fonte

16

Come sottolineato da altri, il concetto di regola verticale non si adatta alle idee originali alla base della struttura e della presentazione dei documenti HTML. Tuttavia, al giorno d'oggi (specialmente con la proliferazione di app Web) esiste un numero limitato di scenari in cui ciò sarebbe effettivamente utile.

Ad esempio, considera un menu di navigazione orizzontale fissato nella parte superiore dello schermo, simile alla barra dei menu nella maggior parte delle applicazioni con interfaccia grafica della finestra. Sono presenti diverse voci di menu di livello superiore disposte da sinistra a destra che, quando si fa clic, aprono i menu a discesa. Anni fa, era pratica comune crearlo con una tabella a riga singola, ma si tratta di un HTML non valido ed è ampiamente riconosciuto che il modo corretto di procedere sarebbe un elenco con CSS fortemente personalizzato.

Ora, supponiamo che tu voglia raggruppare elementi simili, ma aggiungi un separatore verticale tra i gruppi, per ottenere qualcosa del genere:

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

L'utilizzo <hr style="width: 1px; height: 100%; ..." />funziona, ma può essere considerato semanticamente errato poiché stai modificando ciò a cui quell'elemento è effettivamente destinato. Inoltre, non è possibile utilizzarlo all'interno di determinati elementi in cui il DTD HTML consente solo elementi a livello inline (ad esempio all'interno di un elemento).

Un'opzione migliore sarebbe , tuttavia non tutti i browser supportano la display: inline-block;proprietà CSS, quindi l'unica vera opzione a livello di linea è quella di utilizzare un'immagine in questo modo:

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

Ciò ha l'ulteriore vantaggio di essere compatibile con i browser di solo testo (come la lince) poiché viene visualizzato il carattere pipe anziché l'immagine. (Mi infastidisce ancora il fatto che M $ IE usi erroneamente il testo alternativo come suggerimento; ecco a cosa serve l'attributo 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>

Provalo.

— Veniamin Ilmer
fonte

8

Un <hr> all'interno di un display: flex lo farà visualizzare in verticale.

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

Esempio:

<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

7

Che ne dite di:

writing-mode:tb-rl

Dove top-> bottom, right-> left?

Per questo avremo bisogno di una regola verticale.

— vscpp
fonte

È un buon punto. Tuttavia, significa rendere la pagina in modo non convenzionale perché devi competere con tutti gli altri elementi nella dom. Hai mai notato che a volte ci sono differenze di rendering tra i browser? ;) ~ Tuttavia, ottimo punto .

— jcolebrand,

3

Non c'è, dove andrebbe?

Usa CSS per mettere un bordo a destra su un elemento se vuoi qualcosa del genere.

— Chad Birch
fonte

2

HTML ha poco o nessun posizionamento verticale a causa della natura tipografica del layout del contenuto. La regola verticale non si adatta alla sua semantica.

— Myroslav
fonte

2

Provalo e saprai te stesso:

<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

puoi fare in 2 modi:

crea stile come hai già dato in div ma cambia border-left in border-right
prendere un'immagine e renderla larga 1-2 px

— BoltClock
fonte

2

Antica domanda ma ho risolto questo con display:flex;e funziona benissimo:

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

Questa soluzione inoltre non richiede altezza fissa.

— Tero Heiskanen
fonte

Soluzione del futuro, ma probabilmente non fino al 2017-18 + :)

— jave.web

2

Prova questo.

È possibile impostare altezza e larghezza su " div ", come l'ambito per " hr ".

Il margine di " h " viene utilizzato per l'allineamento.

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

Espandi frammento

— Chung-Ming Wu
fonte

2

So di aggiungere la mia risposta molto tardi, ma ne varrebbe la pena, ne sono sicuro. È possibile ottenere la linea verticale usando flexehr

Vedi il mio codice qui .

— Umesh
fonte

2

Meglio tardi che mai!

— Jry9972,

1

Nel contesto di una voce di elenco utilizzata come navigazione, un tag <vr /> sarebbe perfettamente utile. Il motivo per cui non esiste è perché "Non ha senso logico averne uno" nel contesto di HTML dieci anni fa.

— joemaddalone
fonte

1

Per l'uso nell'e-mail HTML per la maggior parte dei client desktop è necessario utilizzare le tabelle. In questo caso, puoi usare il <hr>tag, con lo stile inline necessario (ma semplice), come:

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

Naturalmente lo stile con CSS è più flessibile, ma GMail e simili non consentono l'uso di uno stile CSS diverso da quello in linea ...

— Desko
fonte

1

Puoi usare css per simulare una linea verticale e usare la classe sul div

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

— Yaina Villafañes
fonte

1

Puoi farlo facilmente

hr{
 transform: rotate(90deg);
}

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

Espandi frammento

Fai attenzione all'altezza e alla larghezza di ora

— Nitish
fonte

1

Elementi personalizzati HTML5 (o CSS puro)

1. javascript

Registra il tuo elemento.

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

* -È obbligatorio in tutti gli elementi personalizzati.

2. css

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

* Potrebbe essere necessario giocherellare un po ' display:inline-block|inlineperché inlinenon si espanderà fino a contenere l'altezza dell'elemento. Usa il margine per centrare la linea all'interno di un contenitore.

3. istanziare

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

* Purtroppo non è possibile creare tag personalizzati con chiusura automatica.

uso

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

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

Non vuoi fare casini con JavaScript?

Basta applicare questa classe CSS all'elemento designato.

css

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

* Vedi le note sopra.

collegamento alla risposta originale su SO .

— Qwerty
fonte

0

È possibile creare un tag personalizzato come tale:

<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 qualcuno conosce un modo per trasformarlo in un tag "aperto", come <hr>fammi sapere e lo modificherò)

— SReject
fonte

È possibile <vr />

— aggiungere

0

Non ci sono tag in HTML, ma puoi usare |.

— user3576467
fonte

0

È possibile utilizzare il nuovo tag SVG HTML5:

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

— 1,21 gigawatt
fonte

0

Trovo facile creare un'immagine di una linea , quindi inserirla nel codice come "regola", impostando la larghezza e / o l'altezza secondo necessità. Queste sono state tutte immagini di regole orizzontali, ma non c'è nulla che mi impedisca (o tu) di usare un'immagine di "regola verticale".

Questo è fantastico per molte ragioni; puoi usare facilmente linee, colori o motivi diversi come "regole" e dato che non avrebbero testo, anche se lo avessi fatto nel modo "normale" usando hr in HTML, non dovrebbe avere alcun impatto su SEO o altre cose come quello. E il file di immagine dovrebbe / dovrebbe essere molto piccolo (1 o 2 KB al massimo).

— Peter Jay
fonte

Dovresti includere un codice di esempio per dimostrare la tecnica che stai suggerendo.

— Adam Katz,

0

Troppe risposte eccessivamente complicate. Basta creare un tag TableData che copra il numero di righe che si desidera utilizzare con rowpan. Quindi utilizzare il bordo destro per la barra effettiva.

Esempio:

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

Assicurati che "& nbsp" nella seconda riga esegua la stessa quantità di righe della prima. in modo che vi sia una corretta spaziatura tra entrambi.

Questa tecnica mi ha servito piuttosto bene con il mio tempo in HTML5.

— Kevin Andrew Fogg
fonte

0

Oggi è possibile con CSS3

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

— candlejack
fonte

0

Per le persone che stanno cercando di creare colonne per il testo, c'è una proprietà della regola di colonna che dovresti considerare di usare!

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

Espandi frammento

— abe312
fonte

0

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

Facilmente può essere fatto usando un div come questo

— Choxmi
fonte

-1

Non c'è.

Perché? Probabilmente perché farà una tabella con due colonne.

— OscarRyz
fonte

23

Perché le persone non pensano che le tabelle debbano essere usate per questo (non ho votato in basso).

— erikkallen,

-2

No non c'è. E ti racconterò una piccola storia sul perché non lo è. Ma prima, soluzioni rapide:

a) Utilizzare la classe CSS per elementi di base span/ div, ad esempio ::

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

Dimostrazione di utilizzo => https://jsfiddle.net/fe3tasa0/

b) Usa un bordo solo su un lato e possibilmente un :first-childselettore CSS se vuoi applicare un divisore generale tra elementi fratelli / vicini.

La storia di `<vr>` FITTING nel paradigma originale,
ma non essendoci ancora:

Molte risposte qui suggeriscono che il divisore verticale non si adatta al paradigma / approccio HTML originale ... questo è completamente sbagliato. Anche le risposte si contraddicono molto.

Quelle stesse persone probabilmente chiamano la loro chiara classe CSS "clearfix" - non c'è niente da sistemare sul floating, lo stai semplicemente cancellando ... C'era anche un elemento in HTML3: <clear> . Purtroppo, questo e la liquidazione del galleggiamento è uno dei pochi malintesi comuni.

Comunque. "Allora" nei "secoli HTML originali", non c'era nessun pensiero di qualcosa di simile inline-block, ci sono stati poco blocks, inlinese tables.

L'ultimo è in realtà il motivo per cui <vr>non esiste.
All'epoca si supponeva che:
se si desidera dividere verticalmente qualcosa e / o creare più blocchi da sinistra a destra =>
=> si sta creando / si desidera creare colonne =>
=> ciò implica che si sta creando una tabella =>
= > le tabelle hanno bordi naturali tra le loro celle => nessun motivo per creare a<vr>

Questo approccio è in realtà ancora valido, ma come mostrato dal tempo, la sintassi creata per le tabelle non è adatta a tutti i casi, così come i suoi stili predefiniti.

Un altro, probabilmente più tardi, supponeva che se non si sta creando una tabella, si stanno probabilmente elementi a blocchi mobili . Quel significato si stanno unendo e , di nuovo, puoi impostare un bordo , e quei giorni probabilmente usano persino il :first-childselettore che ho suggerito sopra ...

— jave.web
fonte

Esiste un vr (regola verticale) in HTML?

Elementi personalizzati HTML5 (o CSS puro)

1. javascript

2. css

3. istanziare

uso

Non vuoi fare casini con JavaScript?

css

La storia di <vr> FITTING nel paradigma originale, ma non essendoci ancora:

La storia di `<vr>` FITTING nel paradigma originale,
ma non essendoci ancora: