Як зробити вертикальну лінію за допомогою 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>елементу. Однак одним із підходів, який ви можете спробувати, є використання простої межі ліворуч або праворуч від того, що ви розділяєте:

#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 пікселі та встановити висоту - ця опція дозволить вам перенести його туди, де вам потрібно бути.

Але не найелегантніше рішення.

Ви можете намалювати вертикальну лінію, просто використовуючи висоту / ширину з будь-яким 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 (горизонтальна лінія), а потім обертати його на 90 градусів з допомогою css нижче

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

Я просто змінив значення "лівого" пікселя, щоб розмістити його. (Я використовував вертикальну лінію для вирівнювання вмісту на своїй веб-сторінці, а потім видалив її.)

Щоб створити вертикальну лінію з центром у розділі, я думаю, ви можете використовувати цей код. Я думаю, що контейнер може бути на 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>

Чому б не використовувати & # 124, що є спеціальним символом html для |

Якщо ваша мета - помістити вертикальні лінії в контейнер, щоб розділити поруч дочірні елементи (елементи стовпців), ви можете розглянути можливість стилізації контейнера таким чином:

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

Це додає ліву межу всім дочірнім елементам, починаючи з другої дитини. Іншими словами, ви отримуєте вертикальні межі між сусідніми дітьми.

• >є дочірнім селектором. Він відповідає будь-якій дочірньому елементу, вказаному зліва.
• *є універсальним селектором. Він відповідає елементу будь-якого типу.
• :not(:first-child) означає, що це не перша дитина його батька.

Підтримка веб-переглядача: > *: перша дитина та : not ()

Я думаю, що це краще, ніж просте .child-except-first {border-left: ...}правило, тому що має більше сенсу, щоб вертикальні лінії виходили з правил контейнера, а не з різних дочірніх елементів.

Чи краще це, ніж використовувати імпровізований вертикальний елемент правила (шляхом стилізації горизонтального правила тощо), залежатиме від вашого випадку використання, але це принаймні альтернатива.

Можливий ще один підхід: Використання 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 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 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>
  

Щоб додати вертикальну лінію, потрібно стилювати h.

Тепер, коли ви зробите вертикальну лінію, вона з’явиться посередині сторінки:

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

Тепер, щоб помістити його там, де ви хочете, ви можете використовувати цей код:

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

Це дозволить розташувати його зліва, ви можете обернути її вправо.

Існує <hr>тег для горизонтальної лінії. За допомогою CSS можна також зробити горизонтальну лінію:

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

<hr class="divider">

Властивість ширини визначає товщину лінії. Властивість висоти визначає довжину лінії. Властивість кольору тла визначає колір лінії.

У Попередньому елементі, після якого потрібно застосувати вертикальний рядок, Ви можете встановити CSS ...

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

Поворот на <hr>90 градусів:

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

Для вбудованого стилю я використав цей код:

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