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

336

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

Гопал
источник
39
Разве W3 не может быть умнее и добавить спецификацию для<vr>
OverCoder

Ответы:

546

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

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

Крис ван дер Маст
источник
3
Сочетание стиля с контентом не является запретным для многих. <div style = "border-left: thin solid # 0000ff"> Мне нечего сказать, и я это говорю </ div>
ctpenrose
15
@ctpenrose Это действительно не табу, но разделять их удобно, так как вы можете легко настроить их в одном месте, если это необходимо. Кроме того, размещение его в отдельном файле CSS повышает производительность, поскольку оно может кэшироваться браузером, и в конечном итоге вы передаете меньше байтов по проводам каждый раз, когда запрашиваете визуализированный HTML.
Крис ван дер Маст
235

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

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

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

Энтони
источник
7
Браво, сэр. Это крутой трюк. Все еще нужно установить его, display:inline-blockиначе он не будет хорошо сидеть рядом с другими встроенными элементами.
Алекс W
2
Я не думаю, что это работает в Firefox, хотя. Линия есть, но, кажется, не видна ...
Эдд
2
Спасибо за этот код. Вот рабочий пример jsfiddle этого jsfiddle.net/ccatto/c8RQc
Catto
Джулио, потому что он на самом деле не делит экран на две колонки. Опять же вам нужно использовать некоторые сотрудники CSS для желаемого результата, как и Div.
Исмаил Сахин
Мне это нравится больше, потому что это позволяет избежать странности наличия скрытого элемента div, у которого только одна сторона имеет видимую границу. Конечно, это не то, как вы обычно используете hr, но для меня это все еще имеет смысл.
Левининя
71

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

трепет
источник
1
+1 это решение хорошо, потому что оно легко настраивается для различных нужд
Fanckush
31

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

html, body{height: 100%;}

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

Ишан Джайн
источник
1
Отличный трюк, чтобы получить стиль линии так же, как стандарт <hr>. Возможно , также потребуется дополнительное моделирование с плавающей точкой на стороне контента (например: float:left;)
благоговение
Это «вертикальное» правило по-прежнему разделяет (текстовые) элементы по вертикали как нормальное горизонтальное правило.
Qwerty
20

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

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

Даниэль Вассалло
источник
17

Пользовательские элементы 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;*/
}

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

Qwerty
источник
Печально об ограничениях, но это выглядит действительно очень полезным в некоторых других местах.
Смар
Это не заполнить все размер div, как исправить?
Отавио Баррето
1
@ OtávioBarreto Возможно, вам придется возиться с прокомментированным displayсвойством. Установите либо либо, inlineлибо inline-block. Смотрите примечания выше и пример URL.
Qwerty
9

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

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

Крис
источник
1
нет ничего плохого в этом методе, на самом деле они используют его на веб-сайте jquery
stephenmurdoch
6

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

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

Аамир Шахзад
источник
5

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

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

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

onurbaysan
источник
4

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

Айк Агабекян
источник
Это сломает любой текст или элементы, стоящие рядом.
Qwerty
4

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

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

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

парень
источник
4

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

Эдд
источник
Лучший ответ, все остальные застряли слева или справа. Спасибо!
Абдельхади Лахлоу
3

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

Ланс Караччиоли
источник
2
Потому что это не вертикальная линия
OverCoder
3

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

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

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

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

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

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

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

С. Кирби
источник
3

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

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

Пранав В.Р.
источник
2

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

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

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

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

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

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

Питер Жорж Бу Саада
источник
2

Есть <hr>тег для горизонтальной линии. Он может быть использован с CSS, чтобы сделать горизонтальную линию также:

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}
<hr class="divider">

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

Муминур Рахман
источник
1

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

border-right-width: thin;
border-right-color: black;
border-right-style: solid;
Абхишек Матур
источник
0

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

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

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

Джеймс Дринкард
источник
0

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

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

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }
Nikki
источник
0
<div style="width:1px;background-color:#C0C0C0;"></div>

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

Лукас
источник
-1

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

position: absolute; 
left: 50%;
andr3wll
источник
он спросил, как сделать вертикальную линию, а не как сделать вертикальную линию по центру в середине
Bloodhound