Как сделать тег <hr /> повернуть вертикально

Как сделать тэг <hr /> по вертикали, вместо его стандартного внешнего вида в виде горизонтальной линии/сбоку?Как сделать тег <hr /> повернуть вертикально

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

источник

2014-02-13 Wai

Что значит «спускаться, а не вверх» – dougmacklin

Вы имеете в виду вертикальную линию вместо горизонтальной линии? – roo2

html spec определяет hr как нисходящий тег, если вы хотите, чтобы он поднимался вверх, используйте '' тег/просто шутите – roo2

Вы можете использовать преобразования css. Тем не менее, это просто превращает его, вещи все еще там, где они были бы, если бы вы не повернули его.

HTML

<hr/> 
<hr class="vert" /> 
<hr id="vert1" />

CSS

/*All <hr>*/ 
hr { 
    transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    /* IE 9 */ 
    -webkit-transform:rotate(90deg); 
    /* Safari and Chrome */ 
} 
/*<hr> of class ".vert"*/ 
hr.vert { 
    transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
} 
/*<hr> with id "vert1"*/ 
hr#vert1 { 
    transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
}

источник

2014-02-13 01:23:54 zero298

Будет ли это преобразовывать все или только 1?Также будет ли он работать с firefox? Также я заметил, что

автоматически отправляется в центр ..... – Wai

может также использовать стиль границы слева в каком-то элементе, чем преобразование часа. –

У Патрика Эванса есть код для этого? – Wai

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

<div class="section1"> content </div> 
<div class="section2"> more content </div>

CSS:

.section1 { 
    float: left; 
    width: 200px; 
    border-right: 1px solid #333; 
} 

.section2 { 
    float: left; 
    width: 200px; 
}

Edit: смотри также this answer

источник

2014-02-13 01:27:51 roo2

Я думаю, что это может сработать. Я пойду посмотреть ... – Wai

Я полагаю, вы могли бы повторно стиль <hr /> как встроенный блок элемента, с заданной высотой ...

hr { 
    display: inline-block; 
    width: 2px; 
    height: 256px; 
}

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

источник

2014-02-13 01:28:57 cajunc2

Для чего это стоит, @Eru имеет технику, которую я бы, вероятно, использовал в своем коде. – cajunc2

Положите его в DIV:

<div style="border-right:1px solid #333;"> 
Content here 
</div>

Это с встроенным CSS. В противном случае, отделить CSS:

div { 
border-right:1px solid #333; 
}

источник

2014-02-13 01:30:34

Ну вы могли бы сделать div (<div></div>), а затем дать ему значения с CSS позже относительно высоты/ширины. Если вы хотите, чтобы применить к одному конкретному объекту дать ему id<div id=""> и более одного объекта, дать ему class<div class="">

Пример из CSS вы могли бы сделать это:

#(id name) or div.(class name) { 
height: ; (how tall) 
width: ; (how wide you want it) 
background-color: ; (sets the color of the bar) 
position: ; (depends on if you want it absolute or static etc.) }

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

источник

2014-02-13 01:35:02 Jgoodwyn

Как сделать тег <hr /> повернуть вертикально

ответ

Смежные вопросы