web-dev-qa-db-fra.com

CSS - largeur non respectée sur la balise span

J'ai un problème avec l'une de mes travées. Veuillez considérer les styles suivants:

.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;
}

Ces 3 travées dans mon code:

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

Le problème se produit lorsqu'il n'y a aucune donnée à afficher dans "COL1CHE" (ou peut-être même dans aucune d'entre elles bien que je ne sois pas sûr) quand il n'y a pas de données, cette plage "s'effondre" et sa largeur n'est pas respectée. Cela se produit dans Firefox, dans IE il ne "s'effondre" pas.

J'ai inclus une classe "claire" pour voir si cela aide mais en vain.

Des idées?

csscss-floathtml
31
chicane

display: blockne va pas vous aider ici car lorsque float est activé, les éléments passent automatiquement en mode bloc, quel que soit son mode initial, donc votre largeur devrait fonctionner.

Le problème peut provenir de la balise vide <span> Qui pourrait ne pas être rendue à cause d'une règle obscure dont je ne me souviens pas. Vous devriez essayer d'empêcher votre span d'être vide, peut-être en ajoutant un &nbsp; Si le contenu est vide.

14
Vincent Robert

Span est un élément en ligne et vous ne pouvez donc pas définir de largeur. Pour définir une largeur, vous devez d'abord la définir sur un élément de bloc avec

display:block;

Après cela, vous pouvez définir une largeur. Puisque span est un élément inline natif, vous pouvez également utiliser inline-block et cela fonctionnera même dans IE:

display:inline-block;
67
richard

La largeur n'est pas respectée car span est un élément en ligne. Pour résoudre ce problème, ajoutez:

display: inline-block;

Selon votre situation, display: inline-block peut être mieux que display: block car tout contenu après la durée ne sera pas forcé sur une nouvelle ligne.

32
jimyi

Pour que cela fonctionne, ajoutez simplement

display: block;

Pour le style.

3
Keith Adler

Afficher block et éventuellement flotter left m'a aidé.

display: block;
float: left;
2
Andrei