何も入っていなくてもspanの幅を維持する

Question

空であれば何とかspanの幅を保つことはできますか？

I次のHTML擬似テーブルがあります：CSSで

<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> 

：

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

時々、PHP COL2にエコーされ空で、この問題が発生したときCOL2の幅は0とのCOL1ですその下の段落は上記の段落のcol1の横に積み上げられます。

Answer 1

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

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

また、あなたはそれが表示されます場所に応じて、それに高さを追加する必要があり、またはあなたは100pxに広いが、高い0PXスパンで終わるだろうことに注意してください。

Answer 2

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

ディスプレイを追加してみてください：スパンにブロックしてください。

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

希望します。

Answer 3

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

display:blockにブロック要素を追加するか、floatを使わずにdisplay:inline-blockを使用して残りのテキストとインラインにしておくこともできます。