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 の 1 つに border-left または border-right を配置します。偽物：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;
 }

また、background-color と color は同じなので、color は background-color の「内側」にある必要があります。と：

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