CSS中的垂直规则（与< hr>相对） [英] Vertical rule (as opposed to <hr>) in CSS

问题描述

我知道它不存在，但有一个纯CSS版本？

I know it doesn't exist, but is there a pure CSS version?

想要设置高度，并使它1px宽可能）。

Would like to set height, and make it 1px wide (with shadow, if possible).

只是不能理解纯CSS的方法。需要绝对定位。

Just cannot fathom a pure CSS way of doing this. Would need to be absolutely positioned.

由于我的容器有两个div并排，例如60-40％分割。需要两者之间的垂直规则，但实际上不想在div 2上使用 border-left 。

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-left on div 2.

任何建议？

推荐答案

为此，你基本上需要设置一个地方放一个div语句。 >

for this you basically need to setup a place to put it and a div statement works.

 <div style="width:150px;height:2px;background-color:#000000;">&nbsp;</div>

这也可以参考：

 .hr {width:150px;height:2px;background-color:#000000;} // in your css file/script

 <div class="hr">&nbsp;</div> <!-- IN HTML -->

您可以更改位置并使其向上/向下或向左/ -index

You can change the position and have it going up/down or left/right with css placement and 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

这篇关于CSS中的垂直规则（与&lt; hr&gt;相对）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！