Question

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

想要设置高度，并使其宽1px（如果可能的话，带阴影）。

无法理解纯粹的CSS方式。需要绝对定位。

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

有什么建议吗？

Answer 1

为此你基本上需要设置一个放置它的地方并且div语句可以工作。

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

您可以更改位置，并使用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

基本上

 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

Answer 2

这篇文章已经有了一个问题，但我遇到了同样的问题，我找到了一些有趣的东西：

        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意味着水平规则，垂直添加一个类听起来接近悖论，但它看起来更有条理。

Answer 3

在两者之间放置一个<hr>元素，但将其设置为具有所需的高度/边框/阴影？

CSS中的垂直规则（与<hr />相对）

3 个答案:

基本上