根据内部输入类型选择外部div

Question

我有以下html供用户在注册新帐户时输入信息：

<span class="label"><label for="id_email">Email address:</label></span>
    <div class="editable-input-box-container"><input id="id_email" maxlength="254" name="email" type="email" /></div>

<span class="label"><label for="id_phone_number">Phone Number:</label></span>
    <div class="editable-input-box-container"><input id="id_phone_number" name="phone_number" type="text" /></div>
    <p class="help-text">xxx-xxx-xxxx</p>

<span class="label"><label for="id_can_help">Can provide extra help:</label></span>
    <div class="editable-input-box-container"><input id="id_can_help" name="can_help" type="checkbox" /></div>
    <p class="help-text">Would you be willing to provide your help if needed?</p>

当前显示的是一个不错的注册模板：

但是复选框左对齐，而我希望它与标题“可以提供额外帮助：”对齐。但是，当我使用

选择复选框时

input[type="checkbox"]

在我的CSS中，它只针对输入元素，并在div中右对齐，而div在页面上没有正确对齐。有没有办法根据内部输入是类型复选框选择外部可编辑输入框容器div，以便我可以正确对齐它？

Answer 1

您可以使用jQuery和parent()函数：

$("input[type='checkbox']").parent().css("display","inline");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="label"><label for="id_email">Email address:</label></span>
<div class="editable-input-box-container"><input id="id_email" maxlength="254" name="email" type="email" /></div>

<span class="label"><label for="id_phone_number">Phone Number:</label></span>
<div class="editable-input-box-container"><input id="id_phone_number" name="phone_number" type="text" /></div>
<p class="help-text">xxx-xxx-xxxx</p>

<span class="label"><label for="id_can_help">Can provide extra help:</label></span>
<div class="editable-input-box-container"><input id="id_can_help" name="can_help" type="checkbox" /></div>
<p class="help-text">Would you be willing to provide your help if needed?</p>