Discussion :

[mika774]

Bonjour

J'ai un problème d'affichage sous firefox (v32) et internet explorer (v10) que je ne rencontre pas sur chrome, safari, opéra...
HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<section class="addCommande info">
   <header>Informations &amp; Livraisons</header>
   <label class="label" for="receptionDoc">Réception des docs : </label>
   <select name="receptionDoc" id="receptionDoc">
    <option value="">Sélectionner</option>
    <?php
    foreach ($lesReceptions as $data) {
    ?>
     <option value="<?php echo $data['id']; ?>"><?php echo $data['libelle']; ?></option>
    <?php
    }
    ?>
    </select><br>
    <label class="label" for="livraisonDoc">Livraison des docs : </label>
    <select name="livraisonDoc" id="livraisonDoc">
     <option value="">Sélectionner</option>
     <?php
     foreach ($lesLivraisons as $data) {
     ?>
      <option value="<?php echo $data['id']; ?>"><?php echo $data['libelle']; ?></option>
     <?php
     }
  ?>
</select><br>
<label class="label" for="provenance">Provenance : </label>
<input type="text" name="provenance" id="provenance"><br>
<label class="label" for="numBL">N° Bon de livraison : </label>
<input type="text" name="numBL" id="numBL"><br>
<label class="label" for="dateSouhaitee">Date souhaitée : </label>
<input type="text" name="dateSouhaitee" id="dateSouhaitee" placeholder="JJ/MM/AAAA">

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.addCommande {
  width: 49.45%;
  display: inline-block;
  border: 1px solid black;
  border-collapse: collapse;
  vertical-align: top;
}
 
.info label {
  display: block;
  width: 180px;
  float: left;
  padding-left: 10px;
}

Résultat :


On voit bien qu'en dessous chaque menu déroulant, le label suivant s'aligne sous ce dernier, or, sur chrome et les autres navigateurs, les labels s'alignent les uns en dessous des autres dans la même "colonne".

[Bisûnûrs]

Essaie d'enlever le float:left; et de remplacer le display:block; par un display:inline-block; sur les labels.

[mika774]

J'ai réussi.
J'ai entouré mes labels et mes input d'une div en display: block; et j'ai donné un display: inline-block à mes labels et mes inputs.

Ca marche niquel