Come si crea una linea verticale utilizzando HTML?

Inserisci un <div>markup attorno al punto in cui vuoi che appaia la linea successiva e usa CSS per modellarla:

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

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

È possibile utilizzare il tag della regola orizzontale per creare linee verticali.

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

Utilizzando la larghezza minima e le dimensioni grandi, la regola orizzontale diventa verticale.

Puoi usare uno spazio vuoto <div>esattamente come vuoi che appaia la linea:

HTML:

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

Con altezza esatta (sovrascrivendo lo stile in linea):

  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>

Disegna il bordo se vuoi un aspetto 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>

Ovviamente puoi anche sperimentare combinazioni avanzate:

  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>

Puoi anche creare una linea verticale usando la linea orizzontale HTML <hr />

html, body{height: 100%;}

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

<hr class="vertical" />

Non esiste un equivalente verticale <hr>dell'elemento. Tuttavia, un approccio che potresti voler provare è quello di utilizzare un semplice bordo a sinistra oa destra di tutto ciò che stai separando:

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

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

Elementi personalizzati HTML5 (o CSS puro)

1. javascript

Registra il tuo elemento.

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

*Il - È 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 'con display:inline-block|inlineperchéinline non 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.

Un'altra opzione è quella di utilizzare un'immagine da 1 pixel e impostare l'altezza: questa opzione ti consentirebbe di spostarla dove vuoi.

Non è la soluzione più elegante però.

Puoi disegnare una linea verticale semplicemente usando l'altezza / larghezza con qualsiasi elemento html.

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

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

Non esiste alcun tag per creare una linea verticale in HTML.

1. Metodo: si carica un'immagine di linea. Quindi imposta il suo stile come"height: 100px ; width: 2px"

2. Metodo: è possibile utilizzare i <td>tag<td style="border-left: 1px solid red; padding: 5px;"> X </td>

Puoi usare il tag hr (linea orizzontale) e poi ruotarlo di 90 gradi con css in basso

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

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

Ho usato una combinazione del codice "hr" suggerito, ed ecco come appare il mio codice:

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

Ho semplicemente cambiato il valore del valore pixel "sinistro" per posizionarlo. (Ho usato la linea verticale per allineare il contenuto sulla mia pagina Web, quindi l'ho rimosso.)

Per creare una linea verticale centrata all'interno di un div penso che tu possa usare questo codice. Il "contenitore" potrebbe avere una larghezza del 100%, immagino.

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>

Perché non usare & # 124, che è il carattere speciale HTML per |

Se il tuo obiettivo è quello di mettere le linee verticali in un contenitore per separare gli elementi figlio affiancati (elementi colonna), potresti prendere in considerazione lo stile del contenitore in questo modo:

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

Ciò aggiunge un bordo sinistro a tutti gli elementi figlio a partire dal 2 ° figlio. In altre parole, ottieni bordi verticali tra i bambini adiacenti.

• >è un selettore figlio. Corrisponde a qualsiasi figlio degli elementi specificati a sinistra.
• *è un selettore universale. Corrisponde a un elemento di qualsiasi tipo.
• :not(:first-child) significa che non è il primo figlio del suo genitore.

Supporto del browser: > *: first-child e : not ()

Penso che sia meglio di una semplice .child-except-first {border-left: ...}regola, perché ha più senso che le linee verticali provengano dalle regole del contenitore, non dalle regole dei diversi elementi figlio.

Se questo sia meglio dell'uso di un elemento di regola verticale improvvisato (disegnando una regola orizzontale, ecc.) Dipenderà dal tuo caso d'uso, ma questa è almeno un'alternativa.

È possibile un altro approccio: l'utilizzo di SVG .

per esempio :

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

Professionisti :

• Puoi avere una linea di qualsiasi lunghezza e orientamento.
• È possibile specificare la larghezza, il colore facilmente

Contro:

• SVG sono ora supportati sulla maggior parte dei browser moderni. Ma alcuni vecchi browser (come IE 8 e precedenti) non lo supportano.

Linea verticale fino al 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>
  

Linea verticale lasciata al 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>
  

Per aggiungere una linea verticale devi dare uno stile a h.

Ora quando crei una linea verticale, questa apparirà al centro della pagina:

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

Ora per metterlo dove vuoi puoi usare questo codice:

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

Questo lo posizionerà a sinistra, puoi invertirlo per posizionarlo a destra.

C'è un <hr>tag per la linea orizzontale. Può essere utilizzato con CSS per creare anche linee orizzontali:

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

<hr class="divider">

La proprietà width determina lo spessore della linea. La proprietà height determina la lunghezza della linea. La proprietà color-background determina il colore della linea.

Nell'elemento Precedente dopo il quale si desidera applicare la riga verticale, è possibile impostare CSS ...

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

Ruota di <hr>90 gradi:

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

Per uno stile in linea ho usato questo codice:

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

e quello lo posizionava direttamente al centro.

Avevo bisogno di una linea verticale in linea, quindi ho ingannato un pulsante per diventare una linea.

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

Questo ha funzionato alla grande per me

Per rendere centrale la linea verticale al centro, utilizzare:

position: absolute; 
left: 50%;