アンカータグスタイリングの問題のスパンタグ

CSSスタイリングに関して私が今やっているウェブ開発者の特定の側面に問題があります。以下のCSSでスタイルアンカータグスタイリングの問題のスパンタグ

<div id = "spaninsidea"> 
<ul id="spantest"> 
    <li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li> 
    <li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li> 
</div>

：

私は何を持っていることは、次のHTMLです

#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; } 
#spaninsidea li { display: inline;} 
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px; 
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green; 
float: left; } 
#spaninsidea li a span {background-color:orange; margin-top:50px}

私は何を取得しようとしていますが真ん中に座って、リンクの内側spanedテキストですタグのスパンにマージン設定を適用しようとすると、それは単に静止していますが、フォントの色などを変更すると、クリケットが再生されます。私はなぜそれがスタイルが、笑いを浮かべる図形を傾ける。

私はフロントエンドのものは私には新しいものだと告白するので、一般的に見ることができるぎらつきの問題がある場合は、それらを指摘してください。

乾杯

出典

2011-08-04 Morn

私はあなたのスパンで左と右の余白を自動に設定したいと思うし、あなたはうまくいくでしょう - あなたがjsfiddleを設定するともっと簡単になります。 –

@BethBudwigマージンは、インラインレベルの要素には適用されません。そして、この文脈ではスパンは役に立たない。 –

@RikudoSenninそれから何か提案があります。 – Morn

通常、aにはspanが含まれていないはずです。それは最初の部分でしょう...私はtext-align:center;をspanにも適用することをお勧めします。

更新：ここで作業バージョンを参照してください：http://jsfiddle.net/2eLer/あなただけに等しいかaの高さよりも大きいspanのline-heightを設定する必要があります。

出典

2011-08-04 21:29:43

この場合、 'span'は不要ですが、一般的に' 'a 'の中に' span'を持たないべき理由はありません。これは完全に有効で、複雑なスタイルのリンクにはしばしば必要です。 – tw16

@AndrewPeacock - これは治療を受けました。基本的に、タグの中にテキストを入れたいのですが、それを正しい方法でやりたいのですか？ – Morn

スパンタグは必要に応じて使用できますが、ここにはhttp://jsfiddle.net/nAe7G/1/がありますが、それは表示されずにそのままです。しかし、それはあなたが何をしたいかによって決まります。 –

あなたはまったく<span>を使用しますが、リンク自体のpaddingプロパティを変更しないでください。

出典

2011-08-04 21:28:26

スパンはブロック要素ではないインライン要素であり、マージンやパディングには反応しないと思います。

"inline-block"と呼ばれるCSS表示プロパティがあり、要素がスパンやその他のインライン要素のように浮動しますが、マージンとパディングに関してdivのように動作します。

出典

2011-08-04 21:59:33

アンカータグスタイリングの問題のスパンタグ

答えて

関連する問題