2012-01-02 19 views
3

を取得するにはどのように私はCSS3:5pxの広い太い水平線

<hr style=" border: solid 1px red;padding-top:10px; margin:25px auto 15px auto;clear:both" /> 

5ピクセル幅の水平線のために次のコードCSS3スタイルを試してみましたが、私は5pxの広い赤い四角形を取得しています。

適切なCSS3スタイルのコードを教えてください。

border-bottom:5px solid red; 

は、トリックを行います:要素は右の幅、シンプルを持っているよう

答えて

7

限り。

+0

2018 - >次にborder-top:5px赤が点灯します。 Firefoxのv50 + – MarcoZen

3

あなたはボーダーのではなく、幅と高さのプロパティを使用する必要があります...

width: 5px; 
height: 1px; 
color: red; 

http://www.sovavsiti.cz/css/hr.html

+0

の場合も同様に定義する必要があります。以下のように試しました。


5pxのhrラインを取得できませんでした。 –

0

がトップパディングを取り除く、とのborder-bottomは、上記提案使用http://jsfiddle.net/ZdLfJ/

+0

あなたはプレゼンテーションを別のCSSファイルに置くべきですが、これはうまくいきます。 – Dallas

0

HRラインスタイリングのための私のCSS;

.line_height  { height:4px;         } 
.line_width  { width:100%;         } 
.line_hcenter  { margin-left: auto; margin-right: auto;  } 
.line_vcenter  { margin-top: 10px; margin-bottom: 10px;  } 
.line_color  { color:black;        } 
.line_bgcolor  { background-color:black;      } 
.line_bordercolor { border-top: solid black; border-bottom: solid black; } 

これらのクラスをhrタグに追加します。

3色(color、bgcolor、bordercolor)のすべてのクラスが必要です。

クラス.colorと.bgcolorはブラウザの互換性のために必要です。

0

ボーダープロパティの後に他のものを使用しないでください。ボーダーに1pxの代わりに5pxを作成してください。 Ie

+1

あなたの答えをより具体的にするには、投稿する前にSOのガイドラインをお読みください。 – sparkplug

関連する問題