2009-03-07 10 views
65

です。私はの タグに<span>タグを使用しています。CSSの幅は<span>タグ

<span>Categories</span>.

私はCSSのスパンの背景色/イメージ、幅と高さを指定します。

しかし、スパンの幅はコンテンツ/テキストによって異なります。

だから、<span></span>とすると、CSSの背景画像/色だけでは何も表示されません。

もちろん、私は何かを出すことを望んでいます。

どうすれば解決できますか?

+4

私はこれがスパンの非常に良い使用ではないことを指摘したいと思います。これは、コンテンツ全体を短い範囲で表示することを意図しているため、デフォルトで意図的にブロック要素ではありません。タイトルの場合、h#タグの1つが最適です。これで失敗すると、divは通常スパンよりも優れています。 – Chuck

+0

あなたの答えをありがとう..:私はこれが愚かなq'nと始まると思います。 =)) –

答えて

97

明示的にdisplayプロパティを "block"に設定して、ブロックレベル要素のように動作させることもできますが、その場合は代わりにdivを使用するほうがよいでしょう。

<span style="display:block; background-color:red; width:100px;"></span> 
+0

ありがとう、私は参照してください。スパンがインラインであるために起こります。私は今、違いの賭けを見る。インライン&ブロック表示。 yes、div is suitable.:D..thanks –

+4

DIVを段落内で使用すると、ヘッダー(h1、h2など)は、それを気にすると検証が中断されます。もう一つの可能​​な解決法は、span:display:blockを使うことです。フロート:左。 :) –

+0

ありがとう、以下の答えは、幅を働かせるために重要だった – Angela

4

表示のインラインでエレメントの幅を指定することはできません。改行なしのスペース( )のように何かを入れて、余裕を持たせるようにパディングを設定することもできますが、直接コントロールすることはできません。

display inline-blockを使用できますが、これは広くサポートされていません。

本当のハックは、イメージを内部に入れてからその幅を設定することです。透明な1ピクセルのGIFのようなもの。しかし、推奨されるアプローチではありません。

106

デフォルトでは、幅は指定できないインラインスタイルです。

display: inline-block; 

IEはそれを

をサポートしていません除いて、あなたが、しかし、hack a multiple browser solution

+2

IEはインラインブロックを少なくともバージョン6以来サポートしていると私は信じています。それが適用された要素が自然にインラインであればインラインブロックしかサポートしていないと思います()。 –

+3

はい、IEはインラインブロックをサポートしています。そのサポートは微妙に異なりますが、この場合はうまくいくでしょう。 – thomasrutter

+0

驚くばかり!表示の実際の違いを理解し始めた: –

2

は、例のように属性 '表示' を使用することができ、良い方法のようになります。

<span style="background: gray; width: 100px; display:block;">hello</span> 
<span style="background: gray; width: 200px; display:block;">world</span> 
2

私はpadding属性を使用します。これは、あなたがそのスパンの品質を失う要素なし要素のいずれかの側に設定された画素数を追加できるようになります:

  • それは
  • ブロックになることはありませんあなたは
を期待するとして、それが浮くます

しかし、この方法は埋め込みにのみ追加されるので、コンテンツの長さを変更すると(たとえばカテゴリからタグに変更すると)コンテンツのサイズが変更され、要素の全体サイズも変更されます。しかし、本当にリジッドサイズを設定したい場合は、上記のようにしてdivを使用する必要があります。

0

は、高さを固定し、あなたはそれ内のテキストは、その面積をオーバーフローした場合bahaveする方法を教えてsholud幅たなど、ボックスモデル、コンテンツ、パディング、マージンの詳細についてはbox modelを参照してください。だから、CSSを追加

オーバーフロー:オート;

2

他の回答のように、あなたのスパンはこれで属性を始めること:

display:inline-block; 

今、あなたは幅よりよりパディング使用することができます:あなたは、パディングを使用する場合

padding-left:6%; 
padding-right:6%; 

を、あなたの色はに展開両側(右と左)、右だけではありません(widhtのような)。

関連する問題