CSS 中的垂直规则（相对于 <hr>）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4295558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical rule (as opposed to <hr>) in CSS
提问by 422
I know it doesn't exist, but is there a pure CSS version?
我知道它不存在，但是有纯 CSS 版本吗？
Would like to set height, and make it 1px wide (with shadow, if possible).
想设置高度，并使其宽度为 1px（如果可能，带有阴影）。
Just cannot fathom a pure CSS way of doing this. Would need to be absolutely positioned.
只是无法理解这样做的纯 CSS 方式。需要绝对定位。
As my container has two divs side by side, 60-40% split for example. Need the vertical rule between the two, but don't really want to use border-lefton div 2.
由于我的容器并排有两个 div，例如 60-40% 的拆分。需要两者之间的垂直规则，但真的不想border-left在 div 2上使用。
Any suggestions?
有什么建议？
采纳答案by James Williams
for this you basically need to setup a place to put it and a div statement works.
为此，您基本上需要设置一个放置它的位置并且 div 语句起作用。
<div style="width:150px;height:2px;background-color:#000000;"> </div>
this could also be referenced:
这也可以参考：
.hr {width:150px;height:2px;background-color:#000000;} // in your css file/script
<div class="hr"> </div> <!-- IN HTML -->
You can change the position and have it going up/down or left/right with css placement and z-index
您可以更改位置并使用 css 位置和 z-index 使其向上/向下或向左/向右移动
.hr {width:2px;height:150px;background-color:#000000;position:absolute;top:0px;left:50px;z-index:10;} // in your css file/script
basically
基本上
width = how wide you want it
height = how tall you want it
background-color = is the color you want it to be
position = absolute, relative, float - basically if it stays in one place or moves with page content
top = where to place in reference to top of page - could be margin-top
left = where to place in reference to left of page - could be margin-left
回答by user1330271
This post already got a awnser but I'm facing the same problem and I found something interesting:
这篇文章已经有了一个 awnser，但我面临着同样的问题，我发现了一些有趣的事情：
hr, hr.vertically {
color: #b2b2b2;
background-color: #b2b2b2;
}
hr {
width: 100%;
height: 0;
}
hr.vertically {
width: 0;
height: 100%;
}
<div style="height: 400px;">
a
<hr />
<hr class="vertically" />
</div>
Hr means horizontal rule, adding a class vertically to it sounds close to a paradox, but it look's more organized to me.
Hr 意味着水平规则，向其垂直添加一个类听起来很像悖论，但对我来说它看起来更有条理。
回答by Phrogz
Put an <hr>element between the two, but style it to have the height/border/shadow that you want?
<hr>在两者之间放置一个元素，但将其样式设置为具有您想要的高度/边框/阴影？
