Question

如何将<hr />标记垂直移动，而不是标准外观作为水平线/横向移动？

我希望能够在移动网站上使用它，因此更广泛支持的解决方案优于仅适用于最新浏览器的解决方案。

Answer 1

这需要更改不仅仅是hr。它上面和下面的元素必须浮动。使用坚固的边框可以实现效果：

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

修改：另请参阅this answer

Answer 2

您可以使用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);
}

Answer 3

那么你可以制作一个div（<div></div>），然后在css后面给出高度/宽度值。如果您希望它应用于一个特定对象，请为其指定id <div id="">，并为多个对象提供class <div class="">

你要做的一个例子是：

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

Answer 4

我想你可以将<hr />重新设置为具有指定高度的内联块元素......

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

这只是让<hr />看起来像我认为你希望它看起来的基本例子。您必须使用高度和宽度（以及可能的定位）来使其完全符合您的需要...

Answer 5

把它放在div中：

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

这是内联css。否则，将css分开：

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

如何使<hr />标签垂直移动

5 个答案: