133

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

html

— Xaisoft
джерело

17

Це мертве питання, але тепер, коли специфікація CSS3 вже вийшла, ви можете використати transform: rotate (90deg), щоб зробити вертикальне, горизонтальне правило.

— Жуль

3

Якщо ви використовуєте flexbox як рядки (display: flex; flex-direction: row;), hrелементи автоматично стануть вертикальними. Вам просто потрібно встановити його heightвластивість (наприклад, висота: 80%;).

— Родріго

156

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

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

Тег vr не відповідає цій парадигмі.

Однак це легко зробити за допомогою CSS. Наприклад:

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

Зверніть увагу, що вам потрібно вказати висоту або наповнити контейнер вмістом.

— Енді Бейрд
джерело

4

Таблиці можуть розділяти елементи вертикально, тому те, що ви говорите, не є справжньою причиною відсутності тегів vr.

— CiscoIPPhone

6

Тому не було додано таблиці до специфікації HTML. Таблиці призначені для відображення табличних даних. Майже будь-який HTML-елемент можна використовувати для розділення елементів по вертикалі (все, що ви встановили для відображення: блокувати та плавати: ліворуч із будь-яким встановленим висотою)

— Енді Бейрд

19

ерф. Я намагався сказати, що якщо речі вже можна розділити вертикально, то як би додавання vr не відповідало парадигмі HTMLs?

— CiscoIPPhone

4

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

— Джошуа

3

Я не можу погодитися, що це не відповідає парадигмі. Як ви вже говорили, вона аналізується послідовно, зверху вниз, зліва направо. Ви можете розділити вміст, який йде зліва направо за вертикальним правилом. У попередні дні HTML я погоджуюся, що це не мало б логічного сенсу. Тепер вертикальне правило є часто використовуваною річчю в html, хоча для нього немає семантично правильного тегу. Всього два мої центи.

— Хендека

37

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

— матовий
джерело

16

Як вказували інші, концепція вертикального правила не вписується в оригінальні ідеї, що стоять за структурою та поданням HTML-документів. Однак в наші дні (особливо з поширенням веб-додатків) існує невелика кількість сценаріїв, де це справді було б корисно.

Наприклад, розгляньте горизонтальне навігаційне меню, закріплене у верхній частині екрана, подібне до панелі меню у більшості віконних програм GUI. У вас є кілька пунктів меню верхнього рівня, розташованих зліва направо, які при натисканні відкривають спадні меню. Роки тому було звичайною практикою створювати це за допомогою таблиці з одним рядком, але це поганий 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;" />

Це має додаткову перевагу - сумісність із текстовими браузерами (наприклад, рись), оскільки символ зображення відображається замість зображення. (Мені все одно дратує, що M $ IE неправильно використовує текст alt як підказку; саме для цього є атрибут заголовка!)

— дайског
джерело

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>

Спробуй.

— Веніямін Ілмер
джерело

7

Як щодо:

writing-mode:tb-rl

Де вгорі-> внизу, вправо-> вліво?

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

— vscpp
джерело

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

— jcolebrand

7

<hr> всередині дисплея: 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>

— Ніксінова
джерело

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

ви можете зробити двома способами:

створити стиль, як ви вже надали у діві, але змініть ліворуч на кордон ліворуч на кордон праворуч
сфотографуйте та зробіть його ширину 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/

Це рішення також не вимагає фіксованої висоти.

— Теро Хейсканен
джерело

Рішення майбутнього, але, мабуть, не до 2017-18 + :)

— jave.web

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

Дивіться тут мій кодек .

— Умеш
джерело

2

Краще пізно, ніж ніколи!

— Jry9972

1

У контексті елемента списку, який використовується як навігація, тег <vr /> був би абсолютно корисним. Причина його не існує в тому, що "Немає логічного сенсу мати" в контексті HTML десятиліття тому.

— joemaddalone
джерело

1

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

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

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

— деско
джерело

1

Ви можете використовувати css для імітації вертикальної лінії та використовувати клас на діві

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

— Yaina Villafañes
джерело

1

Ви можете дуже легко зробити це за допомогою

hr{
 transform: rotate(90deg);
}

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

Розгорніть фрагмент

Будьте уважні до висоти та ширини годин

— Нітиш
джерело

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

— jave.web

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 КБ).

— Пітер Джей
джерело

Ви повинні включити зразок коду, щоб продемонструвати техніку, яку ви пропонуєте.

— Адам Кац

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

— свічник
джерело

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

Немає.

Чому? Можливо, тому, що зробить таблиця з двома стовпцями.

— ОскарРиз
джерело

23

Тому що люди не вважають, що для цього слід використовувати таблиці (я не виступав проти цього).

— erikkallen

-2

Ні, немає. І я розповім вам невелику історію про те, чому це не так. Але спочатку швидкі рішення:

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) Скористайтеся одностороннім кордоном та, можливо, :first-childселектором CSS , якщо ви хочете застосувати загальні роздільники серед елементів брати / близнюка.

Історія про `<vr>` FITTING в оригінальній парадигмі,
але все ще не існує:

Багато відповідей тут припускають, що вертикальний роздільник не відповідає оригінальній парадигмі / підходу HTML ... це абсолютно неправильно. Також відповіді дуже суперечать самі собі.

Ці ж люди, ймовірно, називають свій чіткий клас CSS "clearfix" - плаваючий нічого не може виправити, ви просто очищаєте його ... У HTML3 був навіть елемент: <clear> . На жаль, це та очищення від плаваючого - одна з небагатьох поширених помилок.

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

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

Цей підхід насправді все ще діє, але як показав час, синтаксис, створений для таблиць, не підходить для кожного випадку, як і його стилі за замовчуванням.

Ще одним, мабуть пізніше, припущенням було те, що якщо ви не створюєте таблицю, ви, ймовірно, плаваючі елементи блоку . Це означає , що вони стирчать разом , і знову, ви можете встановити кордон , і в ті дні , можливо , навіть використовувати :first-childселектор я запропонував вище ...

— jave.web
джерело

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

Користувацькі елементи HTML5 (або чистий CSS)

1. javascript

2. css

3. інстанція

використання

Не хочете возитися з javascript?

css

Історія про <vr> FITTING в оригінальній парадигмі, але все ще не існує:

Історія про `<vr>` FITTING в оригінальній парадигмі,
але все ще не існує: