133

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

html

— Xaisoft
источник

17

Это мертвый вопрос, но теперь, когда спецификация CSS3 отсутствует, вы можете использовать transform: rotate (90deg), чтобы создать вертикальную горизонтальную линейку.

— Жюль

3

Если вы используете flexbox в качестве строк (display: flex; flex-direction: row;), hrэлементы автоматически станут вертикальными. Вам просто нужно установить его heightсвойство (например, height: 80%;).

— Родриго

156

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

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

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

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

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

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

— Энди Бэрд
источник

4

Таблицы могут разделять элементы по вертикали, поэтому то, что вы говорите, не является реальной причиной отсутствия тега vr.

— CiscoIPPhone,

6

Не поэтому таблицы были добавлены в спецификацию HTML. Таблицы предназначены для отображения табличных данных. Практически любой HTML-элемент можно использовать для разделения элементов по вертикали (все, что вы установили для display: block и float: left с любой установленной высотой)

— Энди Бэрд,

19

егГ. Я пытался сказать, что если вещи уже могут быть разделены по вертикали, то как может добавление vr не следовать парадигме HTML?

— CiscoIPPhone

4

@CiscoIPPhone - Для вертикального разделения потребуется горизонтальная линейка. Боковое разделение потребует вертикального правила. Значит, я думаю, что Энди Бэрд прав.

— Джошуа

3

Я не могу согласиться с тем, что это не соответствует парадигме. Как вы сказали, он анализируется последовательно, сверху вниз, слева направо. Вы можете разделить контент слева направо с помощью вертикальной линейки. Я согласен, что в ранние дни HTML это не имело логического смысла. Теперь вертикальное правило - это часто используемая вещь в html, хотя для него нет семантически правильного тега. Просто мои два цента.

— Hendeca

37

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

— матовый
источник

16

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

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

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

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

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

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

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

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

— daiscog
источник

8

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

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

— Вениамин Ильмер
источник

8

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

— Nixinova
источник

7

Как насчет:

writing-mode:tb-rl

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

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

— vscpp
источник

Неплохо подмечено. Однако это означает отрисовку страницы нетрадиционным способом, потому что вам нужно конкурировать со всеми другими элементами в dom. Вы когда-нибудь замечали, что иногда между браузерами есть различия в рендеринге? ;) ~ Тем не менее, очень хороший момент .

— jcolebrand

3

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

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

— Чад берез
источник

2

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

— Мирослава
источник

2

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

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

— Мухаммад Роконуззаман
источник

2

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

создать стиль, как вы уже указали в div, но измените границу слева на границу справа
возьмите изображение и сделайте его шириной 1-2 пикселя

— BoltClock
источник

2

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

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

— Теро Хейсканен
источник

Решение будущего, но, вероятно, не

— раньше

2

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

Вы можете установить высоту и ширину для « div », как область для « hr ».

Поле « hr » используется для выравнивания.

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

Развернуть фрагмент

— Чун-Мин Ву
источник

2

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

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

— Umesh
источник

2

Лучше поздно, чем никогда!

— Jry9972

1

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

— joemaddalone
источник

1

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

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

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

— DESKO
источник

1

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

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

— Яина Вильяфаньес
источник

1

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

hr{
 transform: rotate(90deg);
}

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

Развернуть фрагмент

Будьте осторожны с высотой и шириной hr

— Nitish
источник

1

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

— Qwerty
источник

0

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

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

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

— SReject
источник

Вы можете <vr />

— сократить

0

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

— user3576467
источник

0

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

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

— 1,21 гигаватт
источник

0

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

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

— Питер Джей
источник

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

— Adam Katz

0

Слишком много слишком сложных ответов. Просто создайте тег 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.

— Кевин Эндрю Фогг
источник

0

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

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

— candlejack
источник

0

Для людей, которые пытаются создать столбцы для текста, есть свойство правила столбца, которое вам следует рассмотреть!

.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's 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>

Развернуть фрагмент

— abe312
источник

0

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

Легко можно сделать с помощью такого div

— Choxmi
источник

-1

Нет.

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

— OscarRyz
источник

23

Потому что люди не думают, что для этого следует использовать таблицы (я не голосовал против).

— erikkallen 07

-2

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

а) Используйте класс 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/

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

История о `<vr>` ФИТИНГЕ в исходной парадигме,
но все еще не существующей:

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

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

Тем не мение. «Тогда» в «оригинальном HTML век», не было никакой мысли о чем - то вроде inline-block, там было просто blocks, inlinesи tables.

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

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

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

— jave.web
источник

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

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

1. javascript

2. css

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

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

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

CSS

История о <vr> ФИТИНГЕ в исходной парадигме, но все еще не существующей:

История о `<vr>` ФИТИНГЕ в исходной парадигме,
но все еще не существующей: