1

我不知道为什么我的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

4

4 回答 4

2

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

jsFiddle 示例

尝试：

#hr {
    background-color:#C80000;
    color:#C80000;
    -webkit-transform:rotate(90deg);
    position:absolute;
    width:100px;
    height:2px;
    left:130px;
    border:2px;
}
于 2013-11-04T19:17:12.093 回答
1

这应该可以在您的浏览器中运行，但在其他浏览器中会失败，就像您编写的那样： http: //caniuse.com/#feat=transforms2d

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

我的恶作剧：例如，如果它分隔 2 个 div，则在其中一个 div 上放置一个左边框或右边框。假的：D

于 2013-11-04T19:21:56.857 回答
0

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

于 2013-11-04T19:15:54.307 回答
0

在 CSS 中，我注意到您调用了 ID 选择器hr。我没记错，这是保留关键字，所以尝试像这样更改代码：

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

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

<hr id="myhr">
于 2013-11-04T19:16:43.877 回答