133

Saya tahu ada hr (aturan horizontal) dalam html, tapi saya tidak percaya ada vr (aturan vertikal). Apakah saya salah dan jika tidak, mengapa tidak ada aturan vertikal?

html Xaisoft
sumber

17

Ini adalah pertanyaan yang sudah mati, tetapi dengan spec CSS3 sekarang keluar, Anda dapat menggunakan transform: rotate (90deg) untuk membuat aturan vertikal dan horizontal.

Jules

3

Jika Anda menggunakan flexbox sebagai baris (tampilan: flex; direction-direction: row;) hrakan otomatis menjadi vertikal. Anda hanya perlu mengatur heightpropertinya (mis. Tinggi: 80%;).

Rodrigo

156

Tidak, tidak ada aturan vertikal.

Tidak masuk akal untuk memilikinya. HTML diuraikan secara berurutan, artinya Anda mengeluarkan kode HTML Anda dari atas ke bawah, dari kiri ke kanan seperti yang Anda inginkan muncul dari atas ke bawah, kiri ke kanan (umumnya)

Tag vr tidak mengikuti paradigma itu.

Ini mudah dilakukan dengan menggunakan CSS. Ex:

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

Perhatikan bahwa Anda perlu menentukan ketinggian atau mengisi wadah dengan konten.

Andy Baird
sumber

4

Tabel dapat memisahkan item secara vertikal, jadi apa yang Anda katakan bukan alasan sebenarnya tidak ada tag vr.

CiscoIPPhone

6

Itu bukan alasan tabel ditambahkan ke spesifikasi HTML. Tabel adalah untuk menampilkan data tabulasi. Hampir semua elemen HTML dapat digunakan untuk memisahkan item secara vertikal (apa pun yang Anda atur untuk ditampilkan: blok dan float: dibiarkan dengan set ketinggian apa pun)

Andy Baird

19

erf. Saya mencoba mengatakan bahwa jika hal-hal sudah dapat dipisahkan secara vertikal maka bagaimana menambahkan vr tidak mengikuti paradigma HTML?

CiscoIPPhone

4

@CiscoIPPhone - Pemisahan vertikal akan membutuhkan aturan horizontal. Pemisahan lateral akan membutuhkan aturan vertikal. Ergo, Andy Baird benar, saya pikir.

Joshua

3

Saya tidak setuju bahwa itu tidak mengikuti paradigma. Seperti yang Anda katakan itu diuraikan secara berurutan, atas ke bawah, kiri ke kanan. Anda dapat membagi konten yang bergerak dari kiri ke kanan dengan aturan vertikal. Pada hari-hari awal HTML saya setuju itu tidak masuk akal. Sekarang aturan vertikal adalah hal yang sering digunakan dalam html, meskipun tidak ada tag semantik yang benar untuk itu. Hanya dua sen saya.

Hendeca

37

Anda dapat membuat aturan vertikal seperti ini: <hr style="width: 1px; height: 20px; display: inline-block;">

matt
sumber

16

Seperti yang ditunjukkan oleh yang lain, konsep aturan vertikal tidak cocok dengan ide asli di balik struktur dan penyajian dokumen HTML. Namun, akhir-akhir ini (terutama dengan semakin banyaknya aplikasi web) ada sejumlah kecil skenario di mana ini memang akan berguna.

Sebagai contoh, pertimbangkan menu navigasi horisontal tetap di bagian atas layar, mirip dengan menu-bar di sebagian besar aplikasi GUI berjendela. Anda memiliki beberapa item menu tingkat atas yang disusun dari kiri ke kanan yang ketika diklik membuka menu drop-down. Bertahun-tahun yang lalu, itu adalah praktik umum untuk membuat ini dengan tabel baris tunggal, tetapi ini adalah HTML yang buruk dan secara luas diakui bahwa cara yang benar untuk pergi adalah daftar dengan CSS yang sangat disesuaikan.

Sekarang, katakan Anda ingin mengelompokkan item yang serupa, tetapi tambahkan pemisah vertikal di antara grup, untuk mencapai sesuatu seperti ini:

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

Menggunakan <hr style="width: 1px; height: 100%; ..." />karya, tetapi secara semantik mungkin dianggap salah karena Anda mengubah untuk apa elemen itu sebenarnya. Selain itu, Anda tidak dapat menggunakan ini dalam elemen tertentu di mana HTML DTD hanya mengizinkan elemen inline-level (misalnya dalam suatu elemen).

Pilihan yang lebih baik adalah , namun tidak semua browser mendukung display: inline-block;properti CSS, jadi satu-satunya opsi inline-level nyata adalah menggunakan gambar seperti:

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

Ini memiliki keuntungan tambahan karena kompatibel dengan browser hanya teks (seperti lynx) karena karakter pipa ditampilkan daripada gambar. (Ini masih mengganggu saya bahwa M $ IE salah menggunakan teks alt sebagai tooltip; itulah judul atribut untuk!)

daiscog
sumber

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>

Cobalah.

Veniamin Ilmer
sumber

7

Bagaimana tentang:

writing-mode:tb-rl

Di mana top-> bawah, kanan-> kiri?

Kami akan membutuhkan aturan vertikal untuk ini.

vscpp
sumber

Itu poin yang bagus. Namun, itu berarti merender halaman dengan cara yang tidak konvensional karena Anda harus bersaing dengan semua elemen lain di dom. Pernahkah Anda memperhatikan bahwa kadang-kadang ada perbedaan render antara browser? ;) ~ Meskipun begitu, poin yang sangat bagus .

jcolebrand

7

Sebuah <hr> di dalam layar: flex akan membuatnya ditampilkan secara vertikal.

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

Contoh:

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

3

Tidak ada, kemana perginya?

Gunakan CSS untuk meletakkan batas-kanan pada elemen jika Anda menginginkan sesuatu seperti itu.

Chad Birch
sumber

2

HTML memiliki sedikit atau tidak ada posisi vertikal karena sifat tipografi tata letak konten. Aturan Vertikal tidak sesuai dengan semantiknya.

myroslav
sumber

2

Cobalah dan Anda akan tahu sendiri:

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

2

Anda bisa melakukannya dengan 2 cara:

buat gaya seperti yang sudah Anda berikan di div tetapi ubah border-left ke border-right
ambil gambar dan buat lebarnya 1-2 px

BoltClock
sumber

2

Pertanyaan kuno tapi saya menyelesaikan ini dengan display:flex;dan itu bekerja dengan baik:

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

Solusi ini juga tidak memerlukan ketinggian tetap.

Tero Heiskanen
sumber

Solusi masa depan, tetapi mungkin tidak sampai 2017-18 + :)

jave.web

2

Coba ini.

Anda dapat mengatur tinggi dan lebar pada " div ", seperti ruang lingkup untuk " jam ".

Margin " hr " digunakan untuk menyelaraskan.

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

Luaskan cuplikan

Chung-Ming Wu
sumber

2

Saya tahu saya menambahkan jawaban saya sangat terlambat, tetapi saya yakin itu layak dilakukan. Anda dapat mencapai garis vertikal menggunakan flexdanhr

Lihat codepen saya di sini .

Umesh
sumber

2

Lebih baik terlambat daripada tidak sama sekali!

Jry9972

1

Dalam konteks item daftar yang digunakan sebagai navigasi, tag <vr /> akan sangat berguna. Alasan itu tidak ada adalah karena "Tidak masuk akal untuk memilikinya" dalam konteks HTML satu dekade lalu.

joemaddalone
sumber

1

Untuk digunakan dalam email HTML untuk sebagian besar klien desktop, Anda harus menggunakan tabel. Dalam hal ini, Anda dapat menggunakan <hr>tag, dengan penataan inline yang diperlukan (tetapi sederhana), seperti:

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

Tentu saja penataan dengan CSS lebih fleksibel, tetapi GMail dan sejenisnya tidak mengizinkan penggunaan penataan CSS apa pun selain inline ...

desko
sumber

1

Anda dapat menggunakan css untuk mensimulasikan garis vertikal, dan menggunakan kelas pada div tersebut

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

Yaina Villafañes
sumber

1

Anda dapat melakukannya dengan sangat mudah

hr{
 transform: rotate(90deg);
}

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

Luaskan cuplikan

Hati-hati dengan tinggi dan lebar jam

Nitish
sumber

1

Elemen khusus HTML5 (atau CSS murni)

1. javascript

Daftarkan elemen Anda.

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

* Ini -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 bermain-main sedikit display:inline-block|inlinekarena inlinetidak 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.

tautan ke jawaban asli pada SO .

Qwerty
sumber

0

Anda dapat membuat tag khusus seperti itu:

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

(Jika ada yang tahu cara saya bisa mengubahnya menjadi tag "terbuka", seperti <hr>beri tahu saya dan saya akan mengeditnya)

Tolak
sumber

Anda dapat memberi tag pendek ke<vr />

jave.web

0

Tidak ada tag dalam HTML, tetapi Anda dapat menggunakan |.

pengguna3576467
sumber

0

Anda dapat menggunakan tag HTML5 SVG baru:

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

1,21 gigawatt
sumber

0

Saya merasa mudah untuk membuat gambar garis , dan kemudian memasukkannya ke dalam kode sebagai "aturan", mengatur lebar dan / atau tinggi sesuai kebutuhan. Ini semua adalah gambar aturan horizontal, tetapi tidak ada yang menghentikan saya (atau Anda) menggunakan gambar "aturan vertikal".

Ini keren karena berbagai alasan; Anda dapat menggunakan garis, warna, atau pola yang berbeda dengan mudah sebagai "aturan", dan karena mereka tidak memiliki teks, bahkan jika Anda melakukannya dengan cara "normal" menggunakan jam dalam HTML, seharusnya tidak memengaruhi SEO atau hal lain seperti bahwa. Dan file gambar akan / harus sangat kecil (paling banyak 1 atau 2KB).

Peter Jay
sumber

Anda harus memasukkan kode sampel untuk menunjukkan teknik yang Anda sarankan.

Adam Katz

0

Terlalu banyak jawaban yang terlalu rumit. Buat saja tag TableData yang merentang berapa banyak baris yang Anda inginkan menggunakan rowspan. Kemudian gunakan batas kanan untuk bilah sebenarnya.

Contoh:

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

Pastikan "& nbsp" di baris kedua menjalankan jumlah baris yang sama dengan yang pertama. sehingga ada jarak yang tepat di antara keduanya.

Teknik ini telah membantu saya lebih baik dengan waktu saya di HTML5.

Kevin Andrew Fogg
sumber

0

Hari ini mungkin dengan CSS3

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

candjack
sumber

0

Untuk orang yang mencoba membuat kolom untuk teks, ada properti aturan kolom yang harus Anda pertimbangkan untuk digunakan!

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

Luaskan cuplikan

abe312
sumber

0

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

Mudah dapat dilakukan menggunakan div seperti ini

Choxmi
sumber

-1

Tidak ada.

Mengapa? Mungkin karena tabel dengan dua kolom akan dilakukan.

OscarRyz
sumber

23

Karena orang tidak berpikir tabel harus digunakan untuk ini (saya tidak downvote).

erikkallen

-2

Tidak, tidak ada. Dan saya akan menceritakan sedikit tentang mengapa hal itu tidak terjadi. Tapi pertama-tama, solusi cepat:

a) Gunakan kelas CSS untuk elemen dasar span/ div, misalnya ::

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

Demonstrasi penggunaan => https://jsfiddle.net/fe3tasa0/

b) Manfaatkan perbatasan satu sisi saja dan mungkin :first-childpemilih CSS jika Anda ingin menerapkan pembagi umum di antara elemen saudara / tetangga.

Kisah tentang `<vr>` FITTING dalam paradigma asli,
tetapi masih belum ada:

Banyak jawaban di sini menyarankan, bahwa pembagi vertikal tidak sesuai dengan paradigma / pendekatan HTML asli ... yang sepenuhnya salah. Juga jawabannya sangat bertentangan dengan diri mereka sendiri.

Orang-orang yang sama itu mungkin menyebut kelas CSS mereka yang jelas "clearfix" - tidak ada yang bisa diperbaiki tentang mengambang, Anda hanya membersihkannya ... Bahkan ada elemen di HTML3: <clear> . Sayangnya, ini dan pembersihan mengambang adalah salah satu dari beberapa kesalahpahaman umum.

Bagaimanapun. "Saat itu" di "usia HTML asli", tidak ada pemikiran tentang sesuatu seperti inline-block, hanya ada blocks, inlinesdantables .

Yang terakhir sebenarnya adalah alasan mengapa <vr>tidak ada.
Saat itu diasumsikan bahwa:
Jika Anda ingin membagi sesuatu secara vertikal dan / atau membuat lebih banyak blok dari kiri ke kanan =>
=> Anda membuat / ingin membuat kolom =>
=> yang menyiratkan Anda membuat tabel =>
= > tabel memiliki batas alami antara sel mereka => tidak ada alasan untuk membuat<vr>

Pendekatan ini sebenarnya masih valid, tetapi seperti yang ditunjukkan oleh waktu, sintaks yang dibuat untuk tabel tidak cocok untuk setiap kasus dan juga gaya defaultnya.

Asumsi lain, mungkin nanti, adalah bahwa jika Anda tidak membuat tabel, Anda mungkin elemen blok mengambang . Itu berarti mereka menempel bersama-sama , dan sekali lagi, Anda dapat mengatur perbatasan , dan hari-hari bahkan mungkin menggunakan :first-childpemilih saya sarankan di atas ...

jave.web
sumber

Apakah ada vr (aturan vertikal) di html?

Jawaban:

Elemen khusus HTML5 (atau CSS murni)

1. javascript

2. css

3. instantiate

pemakaian

Tidak ingin dipusingkan dengan javascript?

css

Kisah tentang `<vr>` FITTING dalam paradigma asli,
tetapi masih belum ada:

Apakah ada vr (aturan vertikal) di html?

Jawaban:

Elemen khusus HTML5 (atau CSS murni)

1. javascript

2. css

3. instantiate

pemakaian

Tidak ingin dipusingkan dengan javascript?

css

Kisah tentang <vr> FITTING dalam paradigma asli, tetapi masih belum ada:

Kisah tentang `<vr>` FITTING dalam paradigma asli,
tetapi masih belum ada: