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

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

Ответ 1

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

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

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

Это легко сделать, используя CSS. Пример:

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

Лучшим вариантом будет , однако не все браузеры поддерживают свойство CSS display: inline-block;, поэтому единственная реальная опция на линейном уровне - использовать изображение следующим образом:

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

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

Ответ 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>

Попробуйте.

Ответ 5

Как насчет:

writing-mode:tb-rl

Где top- > bottom, right- > left?

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

вы можете сделать двумя способами:

создайте стиль, как вы уже дали в div, но измените border-left-border-right
возьмите изображение и сделайте его ширину 1-2 px

Ответ 9

Попробуйте, и вы сами узнаете:

<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>

Ответ 10

Древний вопрос, но я решил это с помощью 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/

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

Ответ 11

Попробуйте это.

Вы можете установить высоту и ширину на " div", например, область " hr".

Для выравнивания используется поле " hr".

<div style="display: inline-flex; width: 25px; height: 100px;">
  <hr style="margin: 0px 0px 0px 12.5px;">
</div>

Ответ 12

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

Смотрите здесь codepen.

Ответ 13

В контексте элемента списка, используемого в качестве навигации, тег < vr/ " > был бы совершенно полезен. Причина, по которой она не существует, состоит в том, что десятилетие назад" она не имеет логического смысла иметь ее" в контексте HTML.

Ответ 14

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

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

Конечно, стиль с CSS более гибкий, но GMail и тому подобное не позволяют использовать какой-либо стиль CSS, отличный от встроенного...

Ответ 15

Вы можете использовать css для имитации вертикальной линии и использовать класс в div

.vhLine {
  border-left: thick solid #000000;
}

Ответ 16

Вы можете очень легко сделать это,

hr{
 transform: rotate(90deg);
}

<html>
<head>
</head>
<body>
<hr>
</body> 
</html>

Ответ 17

Нет.

Почему? Вероятно, потому что таблица с двумя столбцами будет делать.

Ответ 18

Вы можете создать собственный тег как таковой:

<html>
<head>
<style>
vr {
display: inline-block;
// This is where you'd set the ruler color
background-color: black;
// This is where you'd set the ruler width
width: 2px;
//this is where you'd set the spacing between the ruler and surrounding text
margin: 0px 5px 0px 5px;
height: 100%;
vertical-align: top;
}
</style>
</head>
<body>
this is text <vr></vr> more text
</body>
</html>

(Если кто-то знает способ, которым я мог бы превратить это в тег "open-end", например <hr>, дайте мне знать, и я его отредактирую)

Ответ 19

В HTML нет тега, но вы можете использовать |.

Ответ 20

Вы можете использовать новый тег SVG для HTML5:

<svg style="position:absolute;width:100%;height:100%;">
    <line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
    </line>
</svg>

Ответ 21

Мне легко сделать изображение линии, а затем вставить его в код как "правило", задав ширину и/или высоту по мере необходимости. Все они были изображениями горизонтального правила, но я ничего не мешал мне (или вам) использовать изображение "вертикального правила".

Это классно по многим причинам; вы можете легко использовать разные строки, цвета или шаблоны как "правила", и поскольку у них не будет текста, даже если бы вы сделали это "обычным" способом, используя hr в HTML, это не должно влиять на SEO или другие вещи, такие как что. И файл изображения будет/должен быть очень маленьким (максимум 1 или 2 КБ).

Ответ 22

Слишком много чрезмерно сложных ответов. Просто создайте тег TableData, который охватывает количество строк, в которые вы хотите использовать rowspan. Затем используйте правую границу для фактического бара.

Пример:

<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid">&nbsp;</td>
<td rowspan="5">&nbsp;</td>

Убедитесь, что во второй строке "& nbsp" выполняется то же количество строк, что и первое. так что между ними есть правильный интервал.

Этот метод хорошо меня хорошо показал с моим временем в HTML5.

Ответ 23

Сегодня возможно с CSS3

hr {
  background-color:black;
  color:black;
  -webkit-transform:rotate(90deg);
  position:absolute;
  width:100px;
  height:2px;
  left:100px;
}

Ответ 24

Для тех, кто пытается создавать столбцы для текста, есть свойство column-rule, которое вы должны использовать!

.content{
  margin: 20px 5%;
  padding: 5px;
  
}
.content p{
  -webkit-column-count: 3;
  -moz-column-count:3;
  -o-column-count:3;
  column-count: 3; 
  -webkit-column-rule: 1px solid #ccc;
  -moz-column-rule: 1px solid #ccc;
  -o-column-rule: 1px solid #ccc;
  column-rule: 1px solid #ccc;
 
  text-align: justify;
}

<div class="content">
  <p>
    Lorizzle ipsum tellivizzle sit amizzle, consectetizzle adipiscing elit. Nullam away things, shizznit stuff, suscipizzle shiz, gravida vizzle, funky fresh. Doggy phat tortizzle. Check it out its fo rizzle. Bizzle izzle shizzle my nizzle crocodizzle dapibus turpizzle tempizzle i'm in the shizzle. Mauris gizzle nibh et ghetto. Vestibulum ass phat. Pellentesque eleifend nizzle nisi. Fo shizzle my shizz shiznit fo shizzle dizzle. Donec dapibus. That the shizzle uhuh ... yih! urna, pretium eu, mattizzle cool, shit things, nunc. Fizzle suscipizzle. Shizzlin dizzle semper daahng dawg boofron bow wow wow.



  </p>
  
  
</div>

Ответ 25

<div style="width:1px;background-color:red;height:30px;float:right;"></div>

Легко можно сделать, используя div как этот

Ответ 26

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

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

ссылка на оригинальный ответ на SO.

Ответ 27

<Hr> внутри display: 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>

Ответ 28

Нет, нет. И я расскажу вам небольшую историю о том, почему это не так. Но сначала, быстрые решения:

a) Используйте класс CSS для базовых элементов span/div, например: :

.vr{ 
   display: inline-block; 
   vertical-align: middle; 
   /* note that height must be precise, 100% does not work in some major browsers */
   height: 100px; 
   width: 1px; 
   background-color: #000;
}

Демонстрация использования = > https://jsfiddle.net/fe3tasa0/

b) Используйте селектор только с одной стороны и, возможно, CSS :first-child, если вы хотите применить общие разделители между элементами sibling/neigbour.

Рассказ о `<vr>` FITTING в оригинальной парадигме, но все еще не существует:

Многие ответы здесь указывают на то, что вертикальный делитель не соответствует исходной HTML-парадигме/подходу ... что совершенно неверно. Также ответы противоречат друг другу.

Те же самые люди, вероятно, называют свой чистый CSS-класс "clearfix" - исправлять о плавании нет, вы просто очищаете его... В HTML3 был даже элемент: <clear>. К сожалению, это и разрешение плавания являются одним из немногих распространенных заблуждений.

В любом случае. "В то время" в "исходных возрастов HTML" не было мысли о чем-то вроде inline-block, были только blocks, inlines и tables.

Последнее, по сути, является причиной того, что <vr> не существует.
В то время предполагалось, что:
Если вы хотите вертикально разделить что-то и/или сделать больше блоков слева направо = >
= > вы делаете/хотите создавать столбцы = >
= > , что означает, что вы создаете таблицу = >
= > таблицы имеют естественные границы между их ячейками = > нет причины сделать <vr>

Этот подход на самом деле все еще действителен, но, как показало время, синтаксис, созданный для таблиц, не подходит для каждого случая, а также для стилей по умолчанию.

Возможно, еще одно предположение: если вы не создаете таблицу, вы, вероятно, являетесь элементами плавающего блока. Этот смысл они склеивают, и снова вы можете установить границу, и эти дни, вероятно, даже используют селектор :first-child, который я предложил выше...

Ответ 1

Ответ 2

Ответ 3

Ответ 4

Ответ 5

Ответ 6

Ответ 7

Ответ 8

Ответ 9

Ответ 10

Ответ 11

Ответ 12

Ответ 13

Ответ 14

Ответ 15

Ответ 16

Ответ 17

Ответ 18

Ответ 19

Ответ 20

Ответ 21

Ответ 22

Ответ 23

Ответ 24

Ответ 25

Ответ 26

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

1. JavaScript

2. CSS

3. создать экземпляр

использование

Не хотите связываться с JavaScript?

CSS

Ответ 27

Ответ 28

Рассказ о <vr> FITTING в оригинальной парадигме, но все еще не существует:

Рассказ о `<vr>` FITTING в оригинальной парадигме, но все еще не существует: