Как сделать вертикальную линию в HTML

Как сделать вертикальную линию с помощью HTML?

ОТВЕТЫ

Ответ 1

Поместите <div> вокруг разметки, где вы хотите, чтобы строка отображалась в следующем порядке, и используйте CSS для ее стилизации:

.verticalLine {
  border-left: thick solid #ff0000;
}
<div class="verticalLine">
  some other content
</div>

Ответ 2

Вы можете использовать тег горизонтального правила для создания вертикальных линий.

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

Ответ 3

Вы можете использовать пустой <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>

Ответ 4

Вы также можете сделать вертикальную линию, используя HTML горизонтальную линию <hr/>

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}
<hr class="vertical" />

Ответ 5

Вертикального эквивалента элементу <hr>. Однако один из подходов, которые вы можете попробовать, - это использовать простую границу слева или справа от того, что вы разделяете:

#your_col {
  border-left: 1px solid black;
}
<div id="your_col">
  Your content here
</div>

Ответ 6

Пользовательские элементы HTML5 (или чистый CSS)

enter image description here

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>

enter image description here

пример: 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;*/
}

* Смотри заметки выше.

Ответ 7

Еще один вариант - использовать 1-пиксельное изображение и установить высоту - этот параметр позволит вам перемещать его туда, где вам нужно быть.

Не самое элегантное решение.

Ответ 8

Нет никаких тегов для создания вертикальной строки в HTML.

  • Метод: вы загружаете изображение линии. Затем вы устанавливаете свой стиль как "height: 100px ; width: 2px"

  • Метод: вы можете использовать теги <td> <td style="border-left: 1px solid red; padding: 5px;"> X </td>

Ответ 9

Я использовал предложенную комбинацию кода "hr", и вот как выглядит мой код:

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

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

Ответ 10

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

Ответ 11

Вы можете использовать тег 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/

Ответ 12

это также будет сделано так. просто поверните горизонтальную линию

hr {
  transform: rotate(90deg);
}

Теперь у вас будет вертикальная линия и не забудьте добавить размер hr

Ответ 13

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

Ответ 14

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

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

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

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

Поддержка браузера: > *: first-child и : not ( )

Я думаю, что это лучше простого правила .child-except-first {border-left: ...}, потому что имеет смысл иметь вертикальные линии из правил контейнера, а не правила разных дочерних элементов.

Будет ли это лучше, чем использование временного элемента вертикального правила (путем стилизации горизонтального правила и т.д.), будет зависеть от вашего варианта использования, но это альтернатива по крайней мере.

Ответ 15

возможен еще один подход: использование 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 и старше) не поддерживают его.

Ответ 16

Вы можете нарисовать вертикальную линию, просто используя высоту/ширину с любым элементом HTML.

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}
<div id="verticle-line"></div>

Ответ 17

Вертикальная линия справа от 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>

Ответ 18

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

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

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

Теперь, чтобы разместить его там, где вы хотите, вы можете использовать этот код:

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

Это позволит расположить его слева, вы можете перевернуть его, чтобы расположить его справа.

Ответ 19

В предыдущем элементе, после которого вы хотите применить вертикальную строку, вы можете установить CSS...

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

Ответ 20

Для встроенного стиля я использовал этот код:

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

и позиционирует его непосредственно в центре.

Ответ 21

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

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

Ответ 22

Чтобы сделать вертикальную линию центральной в середине, используйте

position: absolute; 
left: 50%;