0

ヘッダーの下部を横切る仕切り線を作成しています。高さは2ピクセル、トーンは2ピクセルである必要があります。上のピクセルは水平方向に完全に灰色である必要があり、下のピクセルは白である必要があります。100％幅の2つの1ピクセルdivを重ねて配置したいのですが、cssとhrタグを使用してこれを行うためのより良い方法を誰かが知っていることを望んでいますか？

どうもありがとうございます！

4

6 に答える 6

5

<hr />タグはブラウザによって実際に一貫性がないため、避ける必要があります。そして正直なところ、私はそれがしばらく使用されているのを見ていません。

あなたができることは、100％幅を配置し<p>、それに上下の色を与えることです-http://jsfiddle.net/zSXya/

p.separator {
    height: 0;
    width: 100%;
    border: 0;
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
于 2012-06-28T17:13:55.897 に答える
1

一般的なアプローチは、ページ全体に水平方向に伸びるdivの背景として1x2ピクセルの画像を使用することです。

.myCustomHRule
{
  width: 100%;
  background-image: url(path/to/my/image.png);
  background-repeat: repeat-x;
}
于 2012-06-28T17:13:27.713 に答える
1

通常、これは上部と下部の境界線の属性です。それらを変更してから、スタイルをソリッドに設定できます。

http://jsbin.com/ixuyoz/

  hr{
    border-top-color: red;
    border-bottom-color: lime;
    border-style: solid;
  }
于 2012-06-28T17:15:24.167 に答える
0

私はこれがそれを行うための最良の方法であるという点でゾルタンに同意しなければなりません。HRタグも久しぶりです。これは簡単に実行でき、ブラウザ間でより一貫性のある外観になります

p.separator {
height: 0;
width: 100%;
border: 0;
border-top: 1px solid red;
border-bottom: 1px solid green;

}

于 2012-06-28T17:34:10.823 に答える
0

ヘッダーのborder-bottomと最初のTRのborder-topを使用できますか？

于 2012-06-28T17:12:41.280 に答える
0

本当にHRを使用したい場合は、背景を画像に設定できます。

hr
{
height:2px;
background: url(image.jpg) no-repeat;
}

<hr />
于 2012-06-28T17:14:05.107 に答える