20

空の場合、どうにかしてスパンの幅を維持することは可能ですか?

次の HTML 疑似テーブルがあります。

<p><span class="col1">Day:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Time:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Class:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Teacher:</span><span class="col2"><?php echo somephp ?></span></p>

CSS の場合:

span.col1 {width: 100px;float: left;}
span.col2 {width: 100px;}

col2 でエコーされる PHP が空である場合があり、これが発生すると、col2 の幅が 0 になり、下の段落の col1 が上の段落の col1 の隣に積み重なってしまいます。

4

3 に答える 3

47

スパンcol2はインライン要素であるため、幅を無視しています。それらをインラインブロック要素にする必要があります。

span.col2 { width: 100px; display: inline-block }

また、表示される場所によっては、高さを追加する必要がある場合があることに注意してください。そうしないと、幅 100px で高さ 0px のスパンになってしまいます。

于 2012-11-04T23:06:56.203 に答える
2

デフォルトでspanはインラインで表示されます。

したがって、追加display:blockしてブロック要素を与えるか、さらに使用display:inline-blockして残りのテキストとインラインに保つことができます (を使用せずにfloat)。

于 2012-11-04T23:08:02.670 に答える
1

デフォルトでは、span 要素はインライン要素であり、幅は無視されます。

スパンに display:block を追加してみてください。

span.col1 {width: 100px;float: left; display:block;}
span.col2 {width: 100px; display:block;}

それが役に立てば幸い。

于 2012-11-04T23:06:40.517 に答える