Есть ли vr (вертикальное правило) в html?

Question

Я знаю, что есть hr (горизонтальное правило) в html, но я не верю, что есть vr (вертикальное правило). Я ошибаюсь, а если нет, то почему нет вертикального правила?

Answer 1

Нет, вертикального правила нет.

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

Тег vr не соответствует этой парадигме.

Однако это легко сделать с помощью CSS. Пример:

<div style="border-left:1px solid #000;height:500px"></div>

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

Answer 2

Вы можете сделать вертикальное правило следующим образом: <hr style="width: 1px; height: 20px; display: inline-block;">

Answer 3

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

Например, рассмотрим горизонтальное навигационное меню, закрепленное в верхней части экрана, аналогично строке меню в большинстве оконных приложений с графическим интерфейсом. У вас есть несколько пунктов меню верхнего уровня, расположенных слева направо, которые при нажатии открывают раскрывающиеся меню. Несколько лет назад, было обычной практикой создавать это с помощью таблицы из одной строки, но это плохой HTML, и широко признано, что правильным решением будет список с сильно настроенным CSS.

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

[Item 1a] [Item 1b] | [Item 2a] [Item 2b]

Использование <hr style="width: 1px; height: 100%; ..." /> работает, но может считаться семантически неверным, поскольку вы изменяете, для чего этот элемент фактически используется. Кроме того, вы не можете использовать это в определенных элементах, где HTML DTD допускает только элементы встроенного уровня (например, в элементе <span>).

Лучшим вариантом будет <span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span>, однако не все браузеры поддерживают свойство CSS display: inline-block;, поэтому единственная реальная опция на встроенном уровне - это использовать изображение так:

<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />

Это дает дополнительное преимущество совместимости с текстовыми браузерами (например, lynx), поскольку вместо изображения отображается символ канала. (Меня по-прежнему раздражает, что M $ IE неправильно использует альтернативный текст в качестве всплывающей подсказки; для этого и нужен атрибут title!)

Answer 4

<style type="text/css">
.vr
{
  display:inline;
  height:100%;
  width:1px;
  border:1px inset;
  margin:5px
}
</style>

<div style="font-size:50px">Vertical Rule: &rarr;<div class="vr"></div>&larr;</div>

Попробуйте.

Answer 5

Как насчет:

writing-mode:tb-rl

Где сверху-> снизу, справа-> слева?

Для этого нам понадобится вертикальное правило.

Answer 6

Нет, куда бы это пошло?

Используйте CSS для наложения границы элемента справа, если вы хотите что-то подобное.

Answer 7

---

внутри дисплея: flex сделает его вертикальным.

JSFiddle: https://jsfiddle.net/w6y5t1kL/

Пример:

<div style="display:flex;">
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
  <hr>
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
</div>

Answer 8

Древний вопрос, но я решил это с display:flex;, и он прекрасно работает:

<div style="display:flex;border:1px dotted black;margin-bottom:20px;">
    <div>
        This is a div
    </div>
    <div style="border-left:1px solid black;margin:0 7.5px;"></div>
    <div>
        This is another div
    </div>  
</div>

https://jsfiddle.net/6qfd59vm/3/

Это решение также не требует фиксированной высоты.

Answer 9

Я знаю, что добавляю свой ответ очень поздно, но это будет стоить, я уверен. Вы можете достичь вертикальной линии, используя flex и hr

См. Мой кодовый код здесь .

Answer 10

HTML практически не имеет вертикального позиционирования из-за типографского характера макета содержимого. Вертикальное правило просто не соответствует его семантике.