Есть ли vr (вертикальное правило) в html? - PullRequest
Новая
       98

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

122 голосов
/ 21 февраля 2009

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

Ответы [ 28 ]

2 голосов
/ 01 августа 2010

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

<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>
2 голосов
/ 31 мая 2017

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

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

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

<div style="display: inline-flex; width: 25px; height: 100px;">
  <hr style="margin: 0px 0px 0px 12.5px;">
</div>
2 голосов
/ 04 августа 2009

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

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

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

.vhLine {
  border-left: thick solid #000000;
}
1 голос
/ 03 января 2018

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

hr{
 transform: rotate(90deg);
}
<html>
<head>
</head>
<body>
<hr>
</body> 
</html>
Будьте осторожны с высотой и шириной hr
1 голос
/ 03 ноября 2013

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

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

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

1 голос
/ 17 декабря 2011

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

0 голосов
/ 29 июля 2017

Для людей, которые пытаются создавать столбцы для текста, есть свойство 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'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>
0 голосов
/ 30 декабря 2016

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

hr {
  background-color:black;
  color:black;
  -webkit-transform:rotate(90deg);
  position:absolute;
  width:100px;
  height:2px;
  left:100px;
}
0 голосов
/ 02 ноября 2016

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...