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

Question

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

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

402

html css

Источник

user128071 30 июн '10 в 10:41

27 ответов

Решение

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

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

Используя минимальную ширину и большой размер, горизонтальное правило становится вертикальным.

279

Источник

user1615214 21 авг '12 в 19:57

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

84

Источник

user109392 04 авг '10 в 10:30

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

html, body{height: 100%;}

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

<hr class="vertical" />

33

Источник

user1825888 10 июн '13 в 05:25

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

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

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

21

Источник

user222908 30 июн '10 в 10:44

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

1. JavaScript

Зарегистрируйте свой элемент.

var vr = document.registerElement('v-r'); // vertical rule please, yes!

* The - является обязательным во всех пользовательских элементах.

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

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

20

Источник

user985454 29 июл '15 в 18:01

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

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

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

9

Источник

user2159585 30 мар '16 в 03:04

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

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

9

Источник

user4782 30 июн '10 в 17:40

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

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

6

Источник

user2593726 06 июл '19 в 14:35

E сть <hr>тег для горизонтальной линии. Его также можно использовать с CSS для создания горизонтальной линии:

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

<hr class="divider">

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

6

Источник

user4629257 21 апр '20 в 18:33

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

5

Источник

user1307789 21 янв '14 в 12:23

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

Метод: Вы загружаете линейное изображение. Затем вы устанавливаете его стиль как "height: 100px ; width: 2px"
Метод: вы можете использовать <td> теги <td style="border-left: 1px solid red; padding: 5px;"> X </td>

5

Источник

user343973 30 июн '10 в 10:54

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

4

Источник

user415144 29 апр '13 в 17:30

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

4

Источник

user1160888 04 сен '14 в 22:59

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

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

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

4

Источник

user3142429 28 дек '13 в 17:41

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

4

Источник

user5875797 27 апр '18 в 11:50

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

4

Источник

user4949328 16 фев '16 в 19:18

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

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

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

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

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

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

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

3

Источник

user859858 02 янв '16 в 02:26

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

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

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

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

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

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

2

Источник

user2553723 31 июл '13 в 13:50

Просто используйте любой из разных символов UTF-8.

Это все, что вам нужно, и оно совместимо со всеми браузерами.

Спасибо мне позже.

1

Источник

user7960764 14 янв '22 в 22:42

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

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

1

Источник

user4984946 23 мар '16 в 08:32

Вы также можете использовать символ HTML | который отображается как '|'

0

Источник

user3596672 20 июл '21 в 15:20

Мне нужна была встроенная вертикальная линия, поэтому я обманом превратил кнопку в линию.

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

0

Источник

user11825923 20 фев '20 в 19:51

Я думаю, что это простой способ ничего больше не делать. Вы можете изменить границу влево или вправо в зависимости от ваших потребностей

0

Источник

user10045360 21 фев '21 в 12:43

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

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

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

0

Источник

user543572 25 май '16 в 17:29

<div style="width:1px;background-color:#C0C0C0;"></div>

Это отлично сработало для меня

0

Источник

user2033044 01 апр '20 в 12:58

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

position: absolute; 
left: 50%;

-1

Источник

user1186528 12 фев '13 в 02:47

Другие вопросы по тегам html css

user90011 30 июн '10 в 10:44 2010-06-30 10:44 · Accepted Answer · 2010-06-30 10:44

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

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

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

601

Источник

user90011 30 июн '10 в 10:44