1

私のアプリケーションには、5 ～ 15 文字のタグがあります。そのため、タグの幅は異なりますが、周囲の div はコンテンツではなく親の幅に合わせて増加します。

div の幅をコンテンツの幅に合わせるには、CSS に何を入れるべきですか?

前もって感謝します！

HTML

<div class="tag">
    <a href="#">
        <span class="content">Test album</span>
    </a>
    <a href="#" class="album">X</a>
</div>

CSS

div.tag {
    background: red;
}

テストケース： http: //jsfiddle.net/T4XJ3/1/

4

2 に答える 2

2

インラインブロックで救助！

div.tag {
  background: red;
  display: inline-block;
}

w3c仕様から：

この値により、要素はインラインレベルのブロックコンテナを生成します。インラインブロックの内部はブロックボックスとしてフォーマットされ、要素自体はアトミックインラインレベルボックスとしてフォーマットされます。

簡単に言うと、これは、divの外側ではスパンのように機能し（コンテンツに合わせたサイズ、コンテンツにインラインで流れるなど）、divの内側では通常のdivのように機能することを意味します（配置、サイズ設定、パディング）など）。

于 2012-05-22T23:19:28.397 に答える
2

<div>要素にはが含まれているため、display:block常にコンテナの全幅を使用します。

display: inline-block（デモ）を使用して、それらを「柔軟」にすることができます。

これはあなたが探しているものですか？

于 2012-05-22T23:14:19.380 に答える