web-dev-qa-db-ja.com

CSS-スパンタグで幅が守られない

スパンの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で発生し、「崩壊」しません。

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

何か案は？

csscss-floathtml
31
chicane

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

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

14
Vincent Robert

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

display:block;

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

display:inline-block;
67
richard

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

display: inline-block;

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

32
jimyi

これを機能させるには、単に

display: block;

スタイルに。

3
Keith Adler

Display blockおよびオプションでfloat leftが役立ちました。

display: block;
float: left;
2
Andrei