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

Question

Как сделать вертикальную линию, используя HTML?

Answer 1

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

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

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

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

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

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

Answer 6

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

Answer 7

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

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

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

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

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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

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

и это расположило его прямо в центре.