étiquettes de positionnement et entrées Avec CSS

Question

j'atteint le faire (une mise en page de formulaire) ...

form layout http://www.stan.com.mx/images/CSSDoubt1.gif

... la prochaine CSS ...

label { 
    clear:left; 
    float:left; 
    margin-right:10px; 
    text-align:right; 
    width:100px; 
} 
input { 
    float:left; 
} 

Mais Je suis en train de faire cette autre chose sans succès ...

form layout http://www.stan.com.mx/images/CSSDoubt2.gif

C'est comme un formulaire sous avec la même mise en page à la place d'une entrée.

Il existe une solution pour cela?

Answer 1

Que pensez-vous de cela?

div { 
    /* either */ margin-left: 110px; 
    /* or */  float: left; 
} 

Answer 2

Cela fonctionne sur ma machine, testé sur IE8 et Firefox (le seul navigateur qui me intéresse)

label { 
    clear:left; 
    float:left; 
    margin-right:10px; 
    text-align:right; 
    width:100px; 
    border:solid 1px; 
} 
input { 
    float:left; 
    border:solid 1px; 
} 
div { 
    float:left; 
    border:solid 1px; 
} 

Et le code HTML:

<label>x</label><input type="text" /> 
    <label>x</label><input type="text" /> 
    <label>x</label><input type="text" /> 
    <label>x</label><input type="text" /> 
    <label>x</label> 
    <div> 
     <label>y</label><input type="text" /> 
     <label>y</label><input type="text" /> 
     <label>y</label><input type="text" /> 

    </div> 

Answer 3

éléments flottants les amène à être rendus comme des boîtes de blocs et oblige les non-flots à circuler autour d'eux. Le div est un élément de niveau bloc et par défaut il est défini sur none. Il est donc affiché sur la même ligne que votre premier élément flottant et consomme toute la ligne, mais les éléments d'étiquette à l'intérieur du div sont désactivés. tous les éléments label/input et sont rendus en dessous. En réglant l'élément div à flotter comme l'entrée, il sera rendu comme une boîte de bloc en ligne avec les autres flottants.

Change:

input { 
    float:left; 
} 

à:

input, div { 
    float:left; 
}