Robert Ochinski Robert Ochinski - 5 months ago 7
CSS Question

Aligning check box's next to text

I'm trying to make my check box's align and stack such as http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_checkbox for example.

The page that I'm working on is http://juniorgoldreport.com/landing-page/

I've tried to use

display:inline;
and
text-align:left;
as well as
float:left;
. I'm not sure how to go about fixing this.The class
chk_bx
is there only because I was trying my best to try and target just that section of the form.

This is my html

<form action="action_page.php">
<fieldset>
<div id="form_jgrsh">
First name:<br>
<input type="text" name="firstname" placeholder="Please enter first name">
<br>
Last name:<br>
<input type="text" name="lastname" placeholder="Please enter last name">
<br>
Email:<br>
<input type="text" name="email" placeholder="Please enter email">
<br><br>
<div class="chk_bx">
<input type="checkbox" name="sub_list" value="SH">Subscribe me to Stockhouse
<br>
<input type="checkbox" name="sub_list" value="JGR">Subscribe me to Junior Gold Report
</div>
<input type="submit" value="Submit">
</div>
</fieldset>
</form>


css

#form_jgrsh {
width:300px;
margin:0 auto;
text-align:left;
}
#form_jgrsh .chk_bx{

}
#form_jgrsh input, textarea {
width:100%;
border: 2px solid black;
line-height: 30px;
}
.exc-form {
text-align:center;
}

Answer

Problem is width:100%. give width to checkbox

#form_jgrsh {
 width:300px;
 margin:0 auto;
 text-align:left;
}
#form_jgrsh .chk_bx{

}
#form_jgrsh input, textarea {
  width:100%;
  border: 2px solid black;
  line-height: 30px;
}
.exc-form {
  text-align:center;
}

.chk_bx input {
  width:20px !important;
  }
<form action="action_page.php">
            <fieldset>
            <div id="form_jgrsh">
            First name:<br>
            <input type="text" name="firstname" placeholder="Please enter first name">
            <br>
            Last name:<br>
            <input type="text" name="lastname" placeholder="Please enter last name">
            <br>
            Email:<br>
            <input type="text" name="email" placeholder="Please enter email">
            <br><br>
            <div class="chk_bx">
            <input type="checkbox" name="sub_list" value="SH">Subscribe me to Stockhouse
            <br>
            <input type="checkbox" name="sub_list" value="JGR">Subscribe me to Junior Gold Report
            </div>
            <input type="submit" value="Submit">
            </div>
          </fieldset>
        </form>

Comments