Как вы делаете вертикальную линию, используя 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;"/>

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

Чтобы создать вертикальную линию, центрированную внутри 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>

Почему бы не использовать & # 124, который является специальным символом html для |

Если ваша цель - поместить вертикальные линии в контейнере для разделения соседних дочерних элементов (элементов столбцов), вы можете рассмотреть стилизацию контейнера следующим образом:

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

Это добавляет левую границу ко всем дочерним элементам, начиная со 2-го дочернего элемента. Другими словами, вы получаете вертикальные границы между соседними детьми.

• >это дочерний селектор. Соответствует любому дочернему элементу элемента (ов), указанного слева.
• *универсальный селектор Соответствует элементу любого типа.
• :not(:first-child) означает, что это не первый ребенок своего родителя.

Поддержка браузера: > *: 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

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

Чтобы добавить вертикальную линию, вам нужно стилизовать час.

Теперь, когда вы делаете вертикальную линию, она появится в середине страницы:

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

Свойство width определяет толщину линии. Свойство height определяет длину строки. Свойство background-color определяет цвет линии.

В предыдущем элементе, после которого вы хотите применить вертикальный ряд, вы можете установить 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%;