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

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

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

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

Ответы [ 28 ]

0 голосов
/ 19 июля 2018

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

enter image description here

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>

enter image description here

пример: http://html5.qry.me/vertical-rule

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

Просто примените этот класс CSS к назначенному элементу.

1052 * CSS * .vr { height: 100%; width: 1px; border-left: 1px solid gray; /*display: inline-block;*/ /*margin: 0 auto;*/ } * См. Примечания выше.

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

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

Там нет.

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

0 голосов
/ 02 ноября 2014

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

0 голосов
/ 05 апреля 2012

Вы можете создать собственный тег следующим образом: 

<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>, дайте мне знать, и я отредактирую его)

0 голосов
/ 27 февраля 2018 
<div style="width:1px;background-color:red;height:30px;float:right;"></div>

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

0 голосов
/ 10 марта 2016

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

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

0 голосов
/ 02 марта 2016

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

<svg style="position:absolute;width:100%;height:100%;">
    <line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
    </line>
</svg>
0 голосов
/ 02 сентября 2016

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

a) Использовать класс CSS для базовых элементов span / div, например: <span class="vr"></span>: 

.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, если вы хотите применить общие делители между элементами одного уровня.

История о <vr> УСТАНОВКА в оригинальной парадигме
, но все еще не существующая:

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

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

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

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

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

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

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

...