Texte de nivellement à côté de checkbox

Une simple question et, sans aucun doute, une décision simple, je suis tout simplement très difficile de le trouver, malgré le fait que je cherchais un peu de temps SO et Google.

Tout ce que je veux faire, c'est prendre un fragment de texte "

Je suis intéressé par une liste étendue ou un profil Premium /Le membre de notre équipe répondra rapidement avec des informations supplémentaires./

" et l'alignez à la droite de la case à cocher /avec du texte aligné sur le bord gauche/, Mais ne l'enveloppez pas, comme maintenant.

Voici mon
http://jsfiddle.net/VAQeY/
Le code /utilisant PureCSS Pour la pose/:


<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Product Name</label>
<input id="name" placeholder="Username" type="text"/>
</div>
<div class="pure-control-group">
<label for="password">Contact Name</label>
<input id="password" placeholder="Password" type="text"/>
</div>
<div class="pure-control-group">
<label for="email">Contact Email</label>
<input id="email" placeholder="Email Address" type="email"/>
</div>
<div class="pure-control-group">
<label for="foo">Website</label>
<input id="foo" placeholder="Enter something here..." type="text"/>
</div>
<div class="pure-control-group">
<label for="foo">Description:</label>
<textarea id="description" placeholder="Enter description here..." type="text"></textarea>
</div>
<div class="pure-controls">
<label class="pure-checkbox" for="cb">
<input id="cb" type="checkbox"/>
I'm interested in an enhanced listing or premium profile, /a member of our team will respond promptly with further information/
</label>
<button class="pure-button pure-button-primary" type="submit">Submit</button>
</div>
</fieldset>
</form>


Toute aide sera très reconnaissante. Merci.
Invité:

Giselle

Confirmation de:

Voici un moyen facile. Probablement il y en a d'autres.


<input id="cb" style="float: left; margin-top: 5px;&gt;" type="checkbox"/>
<div style="margin-left: 25px;">
I'm interested in an enhanced listing or premium profile,
/a member of our team will respond promptly with further information/
</div>


j'ai utilisé
div

pour "block" Structurant du texte et déplacé à droite.
float: left

sur le
input

Titulaire checkbox À gauche du texte /pas plus élevé/.
margin-top

sur le
input

Ajuste l'alignement supérieur avec le texte.

fiddle .

Gabriel

Confirmation de:

C'est une méthode que j'ai utilisée. Cela a fonctionné pour moi mieux que beaucoup d'autres méthodes que j'ai trouvées sur SO.


LABEL.indented-checkbox-text
{
margin-left: 2em;
display: block;
position: relative;
margin-top: -1.4em; /* make this margin match whatever your line-height is */
line-height: 1.4em; /* can be set here, or elsewehere */
}



<input id="myinput" type="checkbox">
<label class="indented-checkbox-text" for="myinput">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>


</input>

Gilles

Confirmation de:

Essayez de déplacer le drapeau gauche, puis enveloppez le texte dans div avec "overflow: hidden;". Ajoute peut-être des trindages comme je l'ai fait ci-dessous pour donner au texte un peu de répit de la case à cocher /Bien que les trindages soient facultatifs/.


<div class="pure-controls">
<label class="pure-checkbox" for="cb">
<input id="cb" style="float: left;" type="checkbox"/>
<div style="overflow: hidden; padding: 0px 0px 0px 5px;">
I'm interested in an enhanced listing or premium profile, /a member of our team will respond promptly with further information/
</div>
</label>
<button class="pure-button pure-button-primary" type="submit">Submit</button>
</div>

Pour répondre aux questions, connectez-vous ou registre