Tuesday, 10 September 2013

Aligning text next to a checkbox

Aligning text next to a checkbox

Simple question, and undoubtedly an easy solution--I'm just having a lot
of trouble finding it despite searching SO and Google for a while.
All I'm looking to do is take the snippet of text "I'm interested in an
enhanced listing or premium profile, (a member of our team will respond
promptly with further information)" and having it aligned to the right of
the check box (with the text left aligned), but not wrapping around it
like it is now.
Here's my JSFiddle
Code (using PureCSS for styling):
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Product Name</label>
<input id="name" type="text"
placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Contact Name</label>
<input id="password" type="text"
placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Contact Email</label>
<input id="email" type="email"
placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Website</label>
<input id="foo" type="text" placeholder="Enter
something here...">
</div>
<div class="pure-control-group">
<label for="foo">Description:</label>
<textarea id="description" type="text"
placeholder="Enter description
here..."></textarea>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<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 type="submit" class="pure-button
pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Any help would be much appreciated. Thanks.

No comments:

Post a Comment