2

ネストされたスパンと、CSS が wi​​dth 属性を適用する方法について質問があります。HTMLはこんな感じで、「wide」クラスで幅を設定します。ボックス クラスはそれに境界線を与えます。幅が適用されるのは、幅とボックスが一緒になっている場合のみです。なぜこれが事実なのか、誰かが私に説明できますか？私は CSS のアマチュアです。おそらく、これは私が見逃した基本的なルールです。

<span class="wide"><span  class="box">Not wide</span></span>
<span class="wide box"><span>Wide</span></span>
<span><span class="wide box">Wide</span></span>
<span class="box"><span class="wide">Not wide</span></span>

ここで効果を確認できます: http://jsfiddle.net/7hXUu/2/

洞察をありがとう、アーロン

4

3 に答える 3

1

理由は使用中float:left;です。しかし、これが正確に何を引き起こしているのかはわかりません。

またはspan, aを使用して、要素の幅を適用できます。display:block;display:inline-block;

于 2012-08-14T08:08:45.263 に答える
1

インライン要素に幅を適用することはできませんが、フロートされたインライン要素のレンダリング動作は異なります。

'width'が として計算される場合'auto'、使用される値は「縮小して合わせる」幅です...次に、縮小して合わせる幅は次のとおりです。 min(max(preferred minimum width, available width), preferred width)

それがすべてではありません。フローティング コンテナはそれぞれにまたがり、新しいブロック フォーマット コンテキストを確立し、フローティング要素の配置の計算結果に影響を与えます。十分なリクエストがあれば、段階的に検討することもできますが、これは間違いなく非現実的なシナリオです。

要するに、これは頭の体操の質問には適したスパゲッティ コードですが、実際の使用にはひどいものです。

于 2012-08-14T10:30:26.473 に答える
-1

boxクラスには がありfloat: left、要素を浮動要素に変換します。これは、 のデフォルトであるインライン要素とは対照的ですspan。プロパティはwidthインライン要素には適用されません。

width要素に適用するもう 1 つの方法は、span要素に設定display: inline-blockすることです。

于 2012-08-14T08:08:24.320 に答える