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

Question

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Стиль границы, если вы хотите 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>

Answer 4

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

html, body{height: 100%;}

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

<hr class="vertical" />

Answer 5

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

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

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

Answer 6

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 к назначенному элементу.

1052 * CSS * .vr { height: 100%; width: 1px; border-left: 1px solid gray; /*display: inline-block;*/ /*margin: 0 auto;*/ } * См. Примечания выше.

Answer 7

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

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

Answer 8

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

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

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

Answer 9

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

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

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

Answer 10

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