web-dev-qa-db-ja.com

SPANの高さプロパティを設定する方法

次のコードを定義済みの高さで伸縮可能にする必要があります

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

ただし、spanはインライン要素であるため、「height」プロパティは機能しません。

代わりにdivを使用してみましたが、上の要素の幅まで拡張されます。そして、幅は柔軟でなければなりません。

誰でもこれに良い解決策を提案できますか？

前もって感謝します。

cssheighthtml
74
Kelvin

display:inline-block CSSで-それはあなたがしたいことをさせるべきです。
互換性の観点から：IE6/7 will quirksモードが示唆するように、これで動作します：

IE 6/7は、自然表示の要素（インライン）でのみ値を受け入れます。

127
casraf

つかいます

.title{
  display: inline-block;
  height: 25px;
}

唯一のトリックはブラウザのサポートです。 サポートされているブラウザのリストがここでインラインブロックを処理するかどうかを確認してください 。

21
Jon Galloway

これは、すべてのブラウザでdisplay：inline-blockが機能するようにするためです。

IE（6/7））のように、「zoom：1」でhasLayoutをトリガーし、表示をインラインに設定すると、インラインブロックとして動作します。

.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}
13
I.devries

あなたがそれをブロック要素にしたくないと仮定すると、あなたは試すかもしれません：

.title  {
    display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
    line-height: 2em; /* or */
    padding-top: 1em;
    padding-bottom: 1em;
}

しかし、最も簡単な解決策は、単に.titleブロックレベル要素として、適切な見出しタグを使用<h1>〜<h6>。

5
David Thomas

span { display: table-cell; height: (your-height + px); vertical-align: middle; }

スパンがテーブルセル（またはその他の要素）のように機能するには、高さを指定する必要があります。スパンに高さを指定しましたが、それらは正常に機能しますが、高さを追加して、目的の動作をさせる必要があります。

0
mike s

もちろん、もう1つのオプションはJavascriptを使用することです（ここではJquery）。

$('.box1,.box2').each(function(){
    $(this).height($(this).parent().height());
})
0
Ukuser32