Question

我正在尝试使我的复选框对齐并堆叠，例如http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_checkbox。

我正在处理的页面是http://juniorgoldreport.com/landing-page/

我尝试使用display: inline;和text-align: left;以及float: left;。我不知道如何解决这个问题。课程chk_bx只是因为我正在尽力尝试定位表单的那一部分。

这是我的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 1

问题是width:100%。将width提交给checkbox

＆＃13;

#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;
  }

＆＃13;

<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>

＆＃13;

Answer 2

在此更改此行：

// First line
#form_jgrsh input[type="text"], textarea {
    width:100%;
    border: 2px solid black;
    line-height: 30px;
}

您正在设置width: 100%的所有输入，这些输入正在按下复选框下方的文本。只将其设置为type="text"输入。

小提琴：https://jsfiddle.net/xa5fv1p0/

Answer 3

您的问题是您已将width:100%分配给所有输入字段，这会导致复选框占据整个宽度。

将一个类分配给复选框并覆盖width属性，如下所示：

#form_jgrsh .checkbox {
  width: auto;
}

小提琴：https://jsfiddle.net/yhc4rujh/

对齐文本旁边的复选框

3 个答案: