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

StackOverflow https://stackoverflow.com/questions/2343989

  •  23-09-2019
  •  | 
  •  

質問

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

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

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

しかしそれ以来 スパン がインライン要素である場合、「高さ」プロパティは機能しません。

使ってみた ディビジョン 代わりに、上の要素の幅まで拡張されます。そして幅は柔軟でなければなりません。

誰かがこれに対する良い解決策を提案できますか?

前もって感謝します。

役に立ちましたか？

解決

それをCSSでdisplay:inline-block与える - 。それはあなたが欲しいものをやらせるべきで
互換性の面では：これでIE6 / 7の意志はの仕事、癖モードが示すように：

  

IE 6/7だけ自然な表示を有する要素に値を受け入れます。インライン

他のヒント

使用

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

唯一のトリックは、ブラウザのサポートです。 ここではサポートされているブラウザハンドルのリストインラインブロックをかどうかをチェックします。

これは、ディスプレイを作ることです：すべてのブラウザでインラインブロックの仕事ます：

あなたは「ズーム：1」でhasLayoutをトリガする場合は、

Quirklyの十分は、IE（6/7）で、次いでインラインにディスプレイを設定し、それは、インラインブロックとして動作

。 
.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

あなたは試してみてください、あなたはそれをブロック要素を作成したくないと仮定します：

.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>を使用します。

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

（そのことについて、または任意の他の要素）テーブルセルのように動作するようにスパンは、

、高さが指定されなければなりません。私はスパンに高さを与えてくれた、と彼らはうまく動作 - 。しかし、あなたは、あなたがやりたいためにそれらを得るために高さを追加する必要があります。

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

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

なぜあなたは、この場合のスパンが必要なのでしょうか？あなたはあなただけのdivを使用することができ、高さのスタイルをしたい場合は？あなたがスパンと同じことをやっている効果でいただきたいので、それは同じ問題を持っているかもしれませんがあなたは、display: inlineでのdivを試してみてください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top