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

【问题标题】：How do I make a <hr /> tag go vertically如何使 <hr /> 标签垂直移动
【发布时间】：2015-04-11 02:18:32
【问题描述】：

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

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

【问题讨论】：

你是什么意思'向下而不是向上'
你的意思是垂直线而不是水平线？
html 规范将 hr 定义为向下标签，如果您希望它向上，请使用 <rh> 标签/开玩笑
抱歉拼写错误，已修复
只要在你想要的内容左边放一个边框就成竖线。

【解决方案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

【讨论】：

【解决方案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);
}

【讨论】：

会转换全部还是只转换 1？它也可以在Firefox上运行吗？我还注意到
自动转到中心.....
最好在某些元素上使用左边框样式而不是对 hr 进行转换。
可能不是他想要的，但无论如何有用/有趣 +1
@Luiz187 为所有、一些和一个垂直添加了代码<hr>
类似#Vertical-line {width:2px; height:200px; border-left: 2px solid #000}

【解决方案3】：

好吧，您可以创建一个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

【讨论】：

【解决方案4】：

把它放在一个div中：

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

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

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

【讨论】：

【解决方案5】：

我想您可以将 <hr /> 重新设置为内联块元素，并指定高度...

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

这只是让<hr /> 看起来像我认为您希望它看起来的基本示例。您必须使用高度和宽度（可能还有定位）才能使其完全满足您的需求......

【讨论】：

不管怎样，@Eru 拥有我可能会在我的代码中使用的技术。