My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page.
Currently, the text is either above the checkbox (centered in its own label) or below it. Below is the code for my Register page and related CSS. I'm struggling to figure this out, so any help would be greatly appreciated.
Register Page
<div class="row">
<article class="span7">
<section class="block-indent-1 maxheight">
<h2>@ViewBag.Title.</h2>
<p>Please ensure your details are entered accurately as they are crucial for website access and operation.</p>
<p>Note that fields marked with an asterisk * must be filled out to register.</p>
</section>
</article>
<article class="span5">
<section class="block-indent-1 divider-left maxheight">
<h2>Sign Up Here</h2>
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @id = "contact-form", role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary("", new { @class = "text-danger" })
<fieldset>
<div class="form-div-5">
<label>
@Html.DropDownListFor(model => model.TitleId, TitleModel.TitleList)
</label>
</div>
<div class="form-div-5">
<label>
@Html.DropDownListFor(model => model.SexId, SexModel.SexList)
</label>
</div>
<div class="form-div-5">
<label>
@Html.TextBoxFor(m => m.Forename, new { @placeholder = "Forename *", @type = "text", required = "required" })
</label>
</div>
<div class="form-div-5">
<label>
@Html.TextBoxFor(m => m.Surname, new { @placeholder = "Surname *", @type = "text", required = "required" })
</label>
</div>
<div class="form-div-5">
<label>
@Html.TextBoxFor(m => m.Email, new { @placeholder = "Email Address *", @type = "email", required = "required" })
</label>
</div>
<div class="form-div-5">
<label>
@Html.TextBoxFor(m => m.UserName, new { @placeholder = "Username *", @type = "text", @pattern = "[a-zA-Z0-9]{6,}", @title = "Your username must have no spaces or special characters and must be at least 6 characters long.", required = "required" })
</label>
</div>
<div class="form-div-5">
<label>
@Html.PasswordFor(m => m.Password, new { @placeholder = "Password *", @type = "password", required = "required" })
</label>
</div>
<div class="form-div-5">
<label>
@Html.PasswordFor(m => m.ConfirmPassword, new { @placeholder = "Confirm Password *", @type = "password", required = "required" })
</label>
</div>
<div class="form-div-5">
<label class="checkbox-inline">
@Html.CheckBoxFor(m => m.AcceptsTerms) @Html.LabelFor(m => m.AcceptsTerms)
</label>
</div>
<div class="button-wrapper">
<input type="submit" class="button" value="Register" /> <input type="reset" value="Reset" name="MFReset" class="button"><span>* Required Fields</span>
</div>
</fieldset>
}
</section>
</article>
</div>
CSS Style
#contact-form {
position: relative;
z-index: 1;
margin: 0 0 20px;
padding: 6px 0 0 0;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
}
...
I would greatly appreciate any assistance with this issue. Thank you!