problème marge CSS étrange

Question

Je coiffant une forme conçue par un client ayant la structure suivante:

<div class="formRow"> 
    <div class="fieldName"> 
     Email 
    </div> 
    <div class="fieldInput"> 
     <input .../> 
    </div> 
</div> 

La largeur de la forme est 500px, mais le fieldName div et la pile de div fieldInput sur le dessus de chaque autre au lieu de s'asseoir côte à côte. C'est parce que (au moins dans Chrome et Firefox), la div fieldName obtient une marge de droite calculée de 340px, occupant toute la largeur du formulaire.

Je ne peux pas sembler surcharger ce comportement non plus. Entrer une marge-droit de 10px ne fait rien. Et définir la largeur de la div soit à un nombre dur ou un pourcentage ne change que la largeur intérieure, pas l'étrange marge de droite.

À quel problème de CSS ai-je besoin, ici?

BTW, voici le CSS:

.formRow{ 
    padding: 3px 0 3px 0; 
    position: relative; 
    height: auto; 
    width: 100%; 
} 

.fieldName{ 
     font-size: 12px; 
     margin-left: 10px; 
     margin-right: 10px; 
     width: 100px; 

} 

.fieldInput{ 
     width: 200px; 
} 

Answer 1

Une chose à noter dans votre exemple de code est que vous utilisez trop de DIVs. Le même code pourrait être écrit comme ceci:

<div class="formRow"> 
    <label class="fieldName">Email</label> 
    <input class="fieldInput" .../> 
</div> 

Ou, mieux encore:

<style type="text/css"> 
    UL, UL LI 
    { 
     margin: 0px; 
     padding: 0px; 
    } 

    UL LI 
    { 
     list-style: none; 
    } 

.fieldName{ 
     font-size: 12px; 
     margin-left: 10px; 
     margin-right: 10px; 
     width: 100px; 

} 

.fieldInput{ 
     width: 200px; 
} 
</style> 

<ul> 
    <li><label class="fieldName">Email</label> 
     <input class="fieldInput" .../></li> 
    ... 
</ul> 

En utilisant les balises DIV pour les deux sections vous violez la signification sémantique de l'étiquette, qui est « cette section de la page est distincte de cette autre section. " Qu'est-ce que vous essayez vraiment de faire est de style votre formulaire label différemment de votre Input et nous avons déjà des balises pour les décrire.

Answer 2

essayer d'ajouter

.fieldName {display: inline} 

ou

.fieldInput {display: inline} 

ou les deux

Answer 3

Si vous ajoutez un display: inline; à chaque élément, que va allo w qu'ils s'assoient côte à côte. Parce qu'ils sont rendus comme block éléments par défaut, le navigateur les met sur leurs propres lignes.

.fieldName{ 
    font-size: 12px; 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 100px; 
    display: inline;  
} 

.fieldInput{ 
    width: 200px; 
    display: inline; 
}