Bagaimana Anda membuat garis vertikal menggunakan HTML?

Letakkan <div>sekitar markup di mana Anda ingin garis muncul berikutnya, dan gunakan CSS untuk gaya itu:

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

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

Anda dapat menggunakan tag aturan horizontal untuk membuat garis vertikal.

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

Dengan menggunakan lebar minimal dan ukuran besar, aturan horizontal menjadi vertikal.

Anda bisa menggunakan yang kosong <div> yang ditata persis seperti yang Anda inginkan garis muncul:

HTML:

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

Dengan tinggi persis (gaya in-line):

  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>

Gaya perbatasan jika Anda ingin tampilan 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>

Tentu saja Anda juga dapat melakukan percobaan dengan kombinasi lanjutan:

  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>

Anda juga dapat membuat garis vertikal menggunakan garis horizontal HTML <hr />

html, body{height: 100%;}

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

<hr class="vertical" />

Tidak ada ekuivalen vertikal dengan <hr>elemen. Namun, satu pendekatan yang mungkin ingin Anda coba adalah menggunakan perbatasan sederhana ke kiri atau kanan apa pun yang Anda pisahkan:

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

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

Elemen khusus HTML5 (atau CSS murni)

1. javascript

Daftarkan elemen Anda.

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

*Itu - wajib di semua elemen khusus.

2. css

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

* Anda mungkin perlu sedikit bermain-main display:inline-block|inlinekarenainline tidak akan berkembang hingga mengandung tinggi elemen. Gunakan margin untuk menempatkan garis di tengah wadah.

3. instantiate

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

* Sayangnya Anda tidak dapat membuat tag kustom sendiri.

pemakaian

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

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

Tidak ingin dipusingkan dengan javascript?

Cukup terapkan kelas CSS ini ke elemen yang Anda tuju.

css

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

* Lihat catatan di atas.

Satu opsi lain adalah menggunakan gambar 1-pixel, dan mengatur ketinggian - opsi ini akan memungkinkan Anda untuk melayang ke tempat yang Anda inginkan.

Bukan solusi yang paling elegan sekalipun.

Anda dapat menggambar garis vertikal dengan hanya menggunakan tinggi / lebar dengan elemen html apa pun.

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

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

Tidak ada tag untuk membuat garis vertikal dalam HTML.

1. Metode: Anda memuat gambar garis. Kemudian Anda mengatur gayanya"height: 100px ; width: 2px"

2. Metode: Anda dapat menggunakan <td>tag<td style="border-left: 1px solid red; padding: 5px;"> X </td>

Anda dapat menggunakan tag jam (garis horizontal) dan kemudian memutarnya 90 derajat dengan css di bawah ini

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

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

Saya menggunakan kombinasi kode "jam" yang disarankan, dan inilah yang tampak seperti kode saya:

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

Saya hanya mengubah nilai nilai piksel "kiri" ke posisi itu. (Saya menggunakan garis vertikal untuk merangkai konten di halaman web saya, dan kemudian saya menghapusnya.)

Untuk membuat garis vertikal yang berpusat di dalam div, saya pikir Anda dapat menggunakan kode ini. 'Wadah' mungkin lebarnya 100%, kurasa.

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>

Mengapa tidak menggunakan & # 124, yang merupakan karakter khusus html untuk |

Jika tujuan Anda adalah meletakkan garis vertikal dalam wadah untuk memisahkan elemen anak berdampingan (elemen kolom), Anda dapat mempertimbangkan untuk menata wadah seperti ini:

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

Ini menambahkan batas kiri ke semua elemen anak mulai dari anak ke-2. Dengan kata lain, Anda mendapatkan batas vertikal antara anak-anak yang berdekatan.

• >adalah pemilih anak. Ini cocok dengan anak manapun dari elemen yang ditentukan di sebelah kiri.
• *adalah pemilih universal. Ini cocok dengan elemen jenis apa pun.
• :not(:first-child) berarti itu bukan anak pertama dari orang tuanya.

Dukungan browser: > *: anak pertama dan : tidak ()

Saya pikir ini lebih baik daripada .child-except-first {border-left: ...}aturan sederhana , karena lebih masuk akal jika garis vertikal berasal dari aturan wadah, bukan aturan elemen anak yang berbeda.

Apakah ini lebih baik daripada menggunakan elemen aturan vertikal sementara (dengan menggunakan aturan horizontal, dll.) Akan tergantung pada use case Anda, tetapi ini setidaknya merupakan alternatif.

Satu pendekatan lagi dimungkinkan: Menggunakan SVG .

misalnya:

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

Pro:

• Anda dapat memiliki garis dengan panjang dan orientasi berapa pun.
• Anda dapat menentukan lebar, warna dengan mudah

Cons:

• SVG sekarang didukung di sebagian besar browser modern. Tetapi beberapa browser lama (seperti IE 8 dan yang lebih lama) tidak mendukungnya.

Garis vertikal langsung ke 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>
  

Garis vertikal kiri ke 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>
  

Untuk menambahkan garis vertikal, Anda perlu menata jam.

Sekarang ketika Anda membuat garis vertikal itu akan muncul di tengah halaman:

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

Sekarang untuk meletakkannya di tempat yang Anda inginkan, Anda dapat menggunakan kode ini:

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

Ini akan memposisikannya ke kiri, Anda dapat membalikkannya ke posisi itu ke kanan.

Ada <hr>tag untuk garis horizontal. Dapat digunakan dengan CSS untuk membuat garis horizontal juga:

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

<hr class="divider">

Properti width menentukan ketebalan garis. Properti height menentukan panjang garis. Properti warna latar belakang menentukan warna garis.

Di elemen Sebelumnya yang Anda inginkan untuk menerapkan baris vertikal, Anda dapat mengatur ...

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

Putar <hr>90 derajat:

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

Untuk gaya sebaris saya menggunakan kode ini:

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

dan yang memposisikannya langsung di tengah.

Saya membutuhkan garis vertikal sebaris, jadi saya menipu sebuah tombol untuk menjadi garis.

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

Ini bekerja baik untuk saya

Untuk membuat garis vertikal ke tengah digunakan tengah:

position: absolute; 
left: 50%;