Css 如何创建垂直人力资源线？

我不知道为什么我的

hr

行不会出现

我认为这要么是我的浏览器有问题（我使用的是chrome），要么是我做错了什么

我试着把颜色调暗，但还是看不出来

这是CSS代码

#hr
 {
   background-color:#C80000;
   color:#C80000;
   -webkit-transform:rotate(90deg);
   position:absolute;
   left:130px;
   border:2px;
 }

这方面的HTML是

<hr id"hr">

---

以下是完整的代码：

我不知道您希望它显示在哪里，但要让它显示出来，只需删除

位置：绝对从您的
#hr
选择器。
在CSS中，我注意到您调用了ID选择器
hr
。Ih我没有弄错，这是一个保留关键字，因此请尝试如下更改代码：

#myhr
 {
   background-color:#C80000;
   color:#C80000;
   -webkit-transform:rotate(90deg);
   position:absolute;
   left:130px;
   border:2px;
 }

此外，背景色和颜色是相同的，因此颜色应该在背景色的“内部”。
以及：



干杯：）
当您完全定位某个内容时，它不仅会从文档流中删除，还会缩小以适应其内容。考虑到您提供的hr没有宽度或高度，您将看不到它


尝试：

这在您的浏览器中应该可以正常工作，但在其他浏览器中会以您编写的方式失败：

您应该为-moz-、-ms-、-o-和不带前缀的泛型转换添加前缀。没有这些，它们就不会是跨浏览器的。话虽如此，为了纠正您的问题，我将指定高度和宽度。因为它旋转了90度，所以它将是宽度的默认高度和高度的默认宽度，即父元素的100%宽度。您的高度可能与元素宽度不匹配。请记住，这是一个变换，而不是真正的旋转。如果使用浏览器的元素检查器并高亮显示它，它是否显示在任何位置？可能不在页面上

我的肮脏伎俩：例如，如果它分隔两个div，在其中一个div上左边框或右边框。假装：D
嘿，伙计们，我解决了这个问题。使用它``而不是“”

像这样：）
hr.style.transform=
rotateZ（${hh+（mm/12）}度）
；
mn.style.transform=
rotateZ（${mm}deg）
；
sc.style.transform=
rotateZ（${ss}deg）

嘿，伙计们，我解决了这个问题。我们必须使用这个符号“`而不是这个”。然后它就可以正常工作了

**

**

hr.style.transform=
rotateZ（${hh+（mm/12）}度）
；
mn.style.transform=
rotateZ（${mm}deg）
；
sc.style.transform=
rotateZ（${ss}deg）
；强文本
我真的不知道如何帮助，但我想说的是，
垂直人力资源
确实让我发笑。创建垂直人力资源线是可能的。Lol。我只是想让他们更正我的代码，因为行不会显示。Lol来自这样一个事实，
意味着水平规则，您试图使其垂直，但这并不是为了贬低这样做的好处。不，hr在CSS中不是保留关键字。这很好，尽管在没有其他hr的情况下给hr一个hr id是不寻常的。
<hr id="myhr">

#hr {
    background-color:#C80000;
    color:#C80000;
    -webkit-transform:rotate(90deg);
    position:absolute;
    width:100px;
    height:2px;
    left:130px;
    border:2px;
}