HTMLにVR（垂直ルール）はありますか？
回答:
いいえ、垂直方向のルールはありません。
持っていることは論理的に意味がありません。HTMLは順番に解析されます。つまり、HTMLコードを上から下、左から右に上から下、左から右に（通常は）表示する方法をレイアウトします。
vrタグはそのパラダイムに従っていません。
ただし、これはCSSを使用して簡単に実行できます。例：
<div style="border-left:1px solid #000;height:500px"></div>高さを指定するか、コンテナにコンテンツを入力する必要があることに注意してください。
他の人が指摘したように、垂直方向のルールの概念は、HTMLドキュメントの構造と表示の背後にある元のアイデアと一致しません。ただし、最近（特にWebアプリの急増に伴い）、これが実際に役立つシナリオがいくつかあります。
たとえば、ほとんどのウィンドウ化されたGUIアプリケーションのメニューバーと同様に、画面の上部に固定された水平ナビゲーションメニューを考えてみます。いくつかのトップレベルメニュー項目が左から右に配置されており、クリックすると、ドロップダウンメニューが開きます。数年前、これを単一行のテーブルで作成するのが一般的でしたが、これは悪いHTMLであり、適切な方法は、CSSを大幅にカスタマイズしたリストであることが広く認識されています。
次に、同様のアイテムをグループ化したいが、グループ間に垂直セパレーターを追加して、次のようなものを実現するとします。
[Item 1a] [Item 1b] | [Item 2a] [Item 2b]使用して<hr style="width: 1px; height: 100%; ..." />作品を、しかし、あなたはその要素がために、実際には何か変化していると意味的に正しくないと考えることができます。さらに、HTML DTDがインラインレベルの要素のみを許可する特定の要素内（たとえば、<span>要素内）でこれを使用することはできません。
より良いオプションはですが<span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span>、すべてのブラウザがdisplay: inline-block;CSSプロパティをサポートしているわけではないため、実際のインラインレベルのオプションは次のような画像を使用することだけです。
<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />
これは、画像の代わりにパイプ文字が表示されるため、テキストのみのブラウザー（lynxなど）と互換性があるという追加の利点があります。（M $ IEがaltテキストをツールチップとして誤って使用していることにはまだ不愉快です。それがタイトル属性の目的です！）
<style type="text/css">
.vr
{
display:inline;
height:100%;
width:1px;
border:1px inset;
margin:5px
}
</style>
<div style="font-size:50px">Vertical Rule: →<div class="vr"></div>←</div>やってみよう。
どうですか：
writing-mode:tb-rlどこが上→下、右→左？
これには垂直方向のルールが必要です。
それを試してみてください、あなたはあなた自身を知るでしょう：
<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>古代の質問ですが、私はこれを解決しましたがdisplay:flex;、うまくいきます：
<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/
このソリューションでは、高さを固定する必要もありません。
私は答えを遅く追加していることを知っていますが、それは確かに価値があります。flexとを使用して垂直線を達成できますhr
こちらの私のコードペンをご覧ください。
ナビゲーションとして使用されているリストアイテムのコンテキストでは、<vr />タグが完全に役立ちます。それが存在しない理由は、10年前のHTMLのコンテキストでは「1つ持つことは論理的に意味がない」からです。
cssを使用して垂直線をシミュレートし、divでクラスを使用できます
.vhLine {
border-left: thick solid #000000;
}HTML5 カスタム要素（または純粋なCSS）
1. javascript
要素を登録します。
var vr = document.registerElement('v-r'); // vertical rule please, yes!* -はすべてのカスタム要素で必須です。
2. css
v-r {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}* 要素の高さまで拡張されないdisplay:inline-block|inlineため、少しいじる必要があるかもしれませんinline。マージンを使用して、コンテナ内の線を中央に配置します。
3.インスタンス化
js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>*残念ながら、カスタムの自己終了タグを作成することはできません。
使用法
<h1>THIS<v-r></v-r>WORKS</h1>
例：http : //html5.qry.me/vertical-rule
JavaScriptをいじりたくないですか？
このCSSクラスを指定した要素に適用するだけです。
CSS
.vr {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}*上記の注を参照してください。
SOの元の回答
へのリンク。
次のようにカスタムタグを作成できます。
<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>（誰かがこれを「オープンエンド」タグに変えることができる方法を知っている場合は、<hr>知らせて編集します）
<vr />
HTMLにはタグはありませんが、|を使用できます。
線の画像を簡単に作成し、それを「ルール」としてコードに挿入し、必要に応じて幅や高さを設定します。これらはすべて横罫画像でしたが、私（またはあなた）が「縦罫」画像を使用するのを妨げるものは何もありません。
これは多くの理由でクールです。異なる線、色、またはパターンを「ルール」として簡単に使用できます。それらにはテキストがないため、HTMLでhrを使用して「通常の」方法で行ったとしても、SEOやその他のようなものには影響しません。それ。また、画像ファイルは非常に小さい（最大で1または2KB）です。
複雑すぎる解答が多すぎます。rowspanを使用して、必要な行数にまたがるTableDataタグを作成するだけです。次に、実際のバーの右ボーダーを使用します。
例：
<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid"> </td>
<td rowspan="5"> </td>2行目の「＆nbsp」が1行目と同じ行数であることを確認してください。両方の間に適切な間隔があるように。
このテクニックは、HTML5での私の時間にかなり役立ちました。
テキスト用の列を作成しようとしている人のために、使用を検討すべき列ルールプロパティがあります。
.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>いいえ、ありません。そして、なぜそうでないのかについて少し話をします。しかし、最初に、 簡単な解決策：
a）基本的な要素span/にCSSクラスを使用しますdiv。例<span class="vr"></span>：：
.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;
}使用例=> https://jsfiddle.net/fe3tasa0/
b）:first-child兄弟/隣接要素間に一般的な仕切りを適用する場合は、片側のみの境界線と、場合によってはCSS セレクターを使用します。
元のパラダイムでの<vr> フィッティングについての物語です
が、まだそこにはありません：
ここでの多くの答えは、垂直分割線が元のHTMLパラダイム/アプローチに適合しないことを示唆しています...それは完全に間違っています。 また、答えは自分自身とかなり矛盾しています。
それらの同じ人々はおそらく彼らの明確なCSSクラスを「clearfix」と呼んでいます-フローティングについて修正するものは何もありません、あなたはそれをクリアしているだけです... HTML3に要素さえありました：<clear>。悲しいことに、これとフローティングのクリアランスは、いくつかの一般的な誤解の1つです。
とにかく。「当時」「元のHTML年齢」で、のようなものについての考えはありませんでしたinline-block、そこだけだったblocks、inlinesとtables。
最後のものは実際には<vr>存在しない理由です。
当時は次のことが想定されていました：
何かを垂直に分割したり、左から右にブロックを増やしたりしたい場合=>
=>列を作成/作成したい=>
=>テーブルを作成していることを意味します=>
= >テーブルのセル間に自然な境界線がある=> 作成する理由がない<vr>
このアプローチは実際にはまだ有効ですが、時間が経つにつれ、テーブル用に作成された構文は、デフォルトのスタイルだけでなく、すべてのケースに適しているわけではありません。
別の、おそらく後で、テーブルを作成していない場合、おそらくブロック要素をフローティングしていると想定されていました。彼らはこだわっている意味それ一緒に、そして再び、あなたが境界線を設定することができ、そして当時はおそらく使用し
:first-child、私は上記の提案セレクタを...