Question

我不知道为什么我的hr行不会出现。

我认为这是浏览器的问题（我正在使用chrome）或者我做错了什么。

我试图使颜色变暗但仍然不会出现。

这是CSS代码

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

那个HTML就是

<hr id"hr">

以下是完整代码：http://pastebin.com/R0C5YBrr

Answer 1

当您绝对定位某些内容时，它不仅会从文档流中删除，而且会缩小以适应其内容。鉴于您提供的hr没有宽度或高度，您将看不到它。

<强> jsFiddle example

尝试：

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

Answer 2

这应该可以在您的浏览器中使用，但在其他方式上会以您编写的方式失败：http://caniuse.com/#feat=transforms2d

您应该为-moz - ， - ms - ， - o-和没有前缀的通用转换添加前缀。没有这些，他们将不会跨浏览器。话虽这么说，为了纠正你的问题，我要指定高度和高度。宽度。由于它旋转了90度，它将是高度的默认高度和高度的默认宽度，即父元素的100％宽度。您的身高可能不会与元素宽度相匹配。请记住，这是一种变换，而不是真正的旋转。如果您使用浏览器的元素检查器并突出显示它是否显示在任何地方？可能在页面外？

我的肮脏伎俩：例如，如果将2个div分开，请在其中一个div上放置一个border-left或border-right。假它：D

Answer 3

我不知道您希望它出现在哪里，但为了让它显示，只需从position:absolute;选择器中删除#hr。

Answer 4

在CSS中，我注意到你调用了ID选择器hr。我没错，这是一个保留的关键字，所以尝试改变这样的代码：

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

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

<hr id="myhr">

欢呼：）

Answer 5

嘿伙计们，我解决了这个问题。用``代替''。

就是这样:) hr.style.transform = rotateZ(${hh+(mm/12)}deg); mn.style.transform = rotateZ(${mm}deg); sc.style.transform = rotateZ(${ss}deg);

Answer 6

<块引用>

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

**

hr.style.transform = rotateZ(${hh+(mm/12)}deg); mn.style.transform = rotateZ(${mm}deg); sc.style.transform = rotateZ(${ss}deg);强文本

如何创建垂直hr线？

6 个答案: