32

スパンの1つに問題があります。次のスタイルを検討してください。

.form_container .col1che
{
float: left; 
width: 4%; 
text-align: left;    
}

.form_container .col2che
{
float: left; 
width: 80%; 
text-align:left;
}

.form_container .col3che
{
float: right; 
width: 13%; 
text-align:right;
}

私のコードでは、次の3つのスパンがあります。

<div class="row"><!-- start: "row" -->
     <span class="col1che">        
          <?php  //some db feeds    ?>        
     </span>
     <span class="col2che">
          <?php  //some db feeds    ?>
     </span>
     <span class="col3che">
          <?php  //some db feeds    ?>
     </span>
     <div class="clear"></div>
</div><!-- end: "row" -->

この問題は、「COL1CHE」に表示されるデータがない場合（または、よくわかりませんが、いずれかのデータでも）、このスパンが「折りたたまれ」、その幅が尊重されない場合に発生します。これはFirefoxで発生し、IEでは「崩壊」しません。

これが役立つかどうかを確認するために「明確な」クラスを含めましたが、役に立ちませんでした。

何か案は？

4

5 に答える 5

69

Span はインライン要素であるため、幅を設定することはできません。幅を設定するには、最初にブロック要素に設定する必要があります

display:block;

その後、幅を設定できます。span はネイティブのインライン要素であるため、inline-block も使用でき、IE でも機能します。

display:inline-block;
于 2009-07-21T20:09:15.383 に答える
32

span はインライン要素であるため、幅は考慮されません。これを修正するには、次を追加します。

display: inline-block;

状況によっては、スパンの後のコンテンツが新しい行に強制されないため、display: inline-blockよりも優れている場合があります。display: block

于 2009-07-21T20:09:59.093 に答える
16

display: block floatがアクティブになると、初期モードに関係なく、要素が自動的にブロックモードに切り替えられるため、ここでは役に立ちません。したがって、幅は機能するはずです。

<span>問題は、私が覚えていないいくつかのあいまいなルールのためにレンダリングされない可能性がある空のタグにある可能性があります。&nbsp;コンテンツが空の場合は、おそらくを追加して、スパンが空にならないようにする必要があります。

于 2009-07-21T20:29:40.023 に答える
3

この作業を行うには、単に追加します

display: block;

スタイルに。

于 2009-07-21T20:09:12.560 に答える
2

ディスプレイblockとオプションでフロートが役に立ちleftました。

display: block;
float: left;
于 2014-07-14T11:34:18.003 に答える