2011-03-06 18 views
5

こんにちは私は、ページ上でJavaScriptを使用することは許されていません。 CSSでリンクのように見えるボタン

<asp:Button ID="titleButton" runat="server" BorderStyle="None" CommandArgument='<%# Eval("Id") %>' OnClick="downloadButtonClick" Text="Download" CssClass="ButtonAsLink" /> 

:私はいくつかのasp:LinkButtonsが、これらは私がボタンでそれらを置き換えるように、JavaScriptを使用するように登場していた

.ButtonAsLink 
{ 
    background-color:transparent; 
    border:none; 
    color:blue; 
    cursor:pointer; 
    text-decoration:underline; 
    font-weight:bold 
} 

私が望んでたので、これは動作しますが、ボタンのテキストがラインアップされませんボタンの端とテキストの間のマージンのために同じ列にラベルが表示されます。

ボタンのテキストの余白をゼロに設定する方法を教えてもらえますか?

+0

可能重複[ボタンは、リンクのように見えるようにするには?](http://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link ) –

答えて

8
.ButtonAsLink{ 
    background-color:transparent; 
    border:none; 
    color:blue; 
    cursor:pointer; 
    text-decoration:underline; 
    font-weight:bold; 
    padding: 0px; 
} 

すべてのパディングを削除する場合は、要素パディングを0pxに設定するか、このような属性を使用できます。

padding: 0px 0px 0px 0px; 

ゼロの代わりに任意の正の数値を使用できます。この属性でパディングの向き、それは数値valuesisに関連する:

パディング:右上の下部には、

最終メモを残し:マージンは、要素とその周りに他の要素の周りの間隔です。パディングは要素内の領域の間隔です(例:a内のテキスト)

+0

マージンとパディングの違いを教えてくれてありがとう。 –

+0

Hey no problem :) –

+0

注:font-weight:太字の後ろにセミコロンが必要です。それで私は1人のキャラクターを編集することができません。 –

2

あなたのスタイルにマージンとパディングを設定するのはどうですか?

+0

このようなプレゼンテーションの問題を緩和するには、CSSリセットファイルを使用する必要があります。 –

+0

合意......... – rcravens

+0

「margin:0;あなたのCSSのプロパティに '0 'を埋め込みます。また、あなたは強制的に試すことができます: 'display:inline;' – vbence

1

ここでは、あなたのために働く可能性のあるものをまとめています。それは完璧ではありませんが、あなたの出発点になるかもしれません。

http://jsfiddle.net/Gj9R6/1/

関連する問題