HTMLを使用して垂直線をどのように作成しますか？

置く<div>あなたはラインがスタイルの隣に、そして使用CSSにそれを表示するマークアップを中心に：

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

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

水平罫線タグを使用して、垂直線を作成できます。

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

最小の幅と大きなサイズを使用することにより、水平の罫線は垂直の罫線になります。

<div>線を表示させたいとおりのスタイルの空を使用できます。

HTML：

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

正確な高さ（インラインスタイルを上書き）：

  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>

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>

もちろん、高度な組み合わせを試すこともできます。

  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>

HTMLの水平線を使用して垂直線を作成することもできます <hr />

html, body{height: 100%;}

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

<hr class="vertical" />

<hr>要素に対応する垂直方向はありません。ただし、試したいアプローチの1つは、分離する対象の左側または右側に単純な境界線を使用することです。

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

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

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;*/
}

*上記の注を参照してください。

もう1つのオプションは、1ピクセルの画像を使用して高さを設定することです。このオプションを使用すると、必要な場所に画像をフローティングできます。

しかし、最もエレガントなソリューションではありません。

HTML要素で高さ/幅を使用するだけで、垂直線を描画できます。

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

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

HTMLに縦線を作成するためのタグはありません。

1. 方法：ライン画像をロードします。次に、そのスタイルを次のように設定します"height: 100px ; width: 2px"

2. 方法：<td>タグを使用できます<td style="border-left: 1px solid red; padding: 5px;"> X </td>

hr（水平線）タグを使用して、下のcssで90度回転させることができます

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

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

私は提案された「hr」コードの組み合わせを使用しました、そしてこれが私のコードがどのように見えるかです：

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

「左」のピクセル値の値を変更して、配置しました。（縦線を使用してWebページのコンテンツを並べた後、削除しました。）

divの中央に垂直線を作成するには、このコードを使用できると思います。「コンテナ」の幅は100％かもしれません。

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>

|のHTML特殊文字である＆＃124を使用しないでください

コンテナー内に垂直線を配置して、並べて子要素（列要素）を分離することが目的である場合は、次のようにコンテナーのスタイルを検討することができます。

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

これにより、2番目の子から始まるすべての子要素に左ボーダーが追加されます。つまり、隣接する子の間に垂直の境界線が表示されます。

• >子セレクターです。左側で指定された要素の子に一致します。
• *ユニバーサルセレクターです。任意のタイプの要素と一致します。
• :not(:first-child) 親の最初の子ではないことを意味します。

ブラウザーサポート：> *：first-child and：not（）

これは単純なものよりも優れていると思います .child-except-first {border-left: ...}垂直線を異なる子要素のルールではなく、コンテナのルールから取得する方が理にかなっているためルールます。

これが（水平方向の罫線などのスタイルを設定することによって）その場しのぎの垂直方向の罫線要素を使用するよりも優れているかどうかは、ユースケースによって異なりますが、これは少なくとも代替手段です。

もう1つのアプローチが可能です。SVGを使用します。

例：

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

長所：

• 任意の長さと向きの線を使用できます。
• 幅・色を簡単に指定できます

短所：

• 現在、ほとんどの最新のブラウザーでSVGがサポートされています。しかし、一部の古いブラウザ（IE 8以前など）はそれをサポートしていません。

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>
  

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>
  

垂直線を追加するには、hrのスタイルを設定する必要があります。

垂直線を作成すると、ページの中央に表示されます。

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

次に、このコードを使用できる場所に配置します。

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

これは左に配置します。逆に右に配置できます。

垂直行を適用する前の前の要素で、CSSを設定できます...

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

<hr>90度回転します。

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

<hr>横線用のタグがあります。CSSと共に使用して、水平線を作成することもできます。

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

<hr class="divider">

widthプロパティは、線の太さを決定します。heightプロパティは、線の長さを決定します。background-colorプロパティは、線の色を決定します。

インラインスタイルの場合は、次のコードを使用しました。

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

そしてそれはそれを中央に直接配置しました。

インラインの縦線が必要だったので、ボタンをだまして線にした。

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

これは私にとってはうまくいきました

垂直線を中央に配置するには：

position: absolute; 
left: 50%;