在同一行显示复选框和标签答案

【问题标题】：Display checkbox and label on the same line在同一行显示复选框和标签
【发布时间】：2015-09-01 04:30:19
【问题描述】：

我试图在同一行显示复选框，后跟一个标签。这是我的代码。

<div class="checkbox">
  <label>
    Internal Org Person:
    <input type="checkbox" path="isInternalOrgPerson" id="isInternalOrgPerson" value="">
  </label>
</div>

但复选框未与标签对齐。

编辑：我添加了样式，但它显示在下一行。这是一个弹出窗口。我必须更改标签的属性吗？这是我的完整代码：

<form:form method="get" modelAttribute="newAddress"
                action="/project/add">
                <div class="modal fade" id="addUser" role="dialog">
                    <div class="modal-dialog">

                        <!-- Add User Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Add User</h4>
                            </div>
                            <div class="modal-body">
                                <spring:bind path="firstName">
                                    <div class="form-group">
                                        <label for="newFirstName">First Name:</label>
                                        <form:input path="firstName" type="text" class="form-control"
                                            id="firstname" placeHolder="First Name" />
                                    </div>
                                </spring:bind>
                                <spring:bind path="lastName">
                                    <div class="form-group">
                                        <label for="newLastName">Last Name:</label>
                                        <form:input path="lastName" type="text" class="form-control"
                                            id="lastName" placeHolder="Last Name" />
                                    </div>
                                </spring:bind>
                                <spring:bind path="address">
                                    <div class="form-group">
                                        <label for="newEmail">Email Address:</label>
                                        <form:input path="address" type="text" class="form-control"
                                            id="address" placeHolder="email@dn.xyz" />
                                    </div>
                                </spring:bind>
                                <spring:bind path="isInternalOrgPerson">
                                <div class="checkbox">
                                <label>
                                        Internal Org Person:
                                <input type="checkbox" path="isInternalOrgPerson" id="isInternalOrgPerson" value="">
                                </label>
                                </div>
                                </spring:bind>

                            </div>
                            <div class="modal-footer">
                                <button id="addUser" type="submit" class="btn btn-success">Add User</button>
                                <button type="but`enter code here`ton" class="btn btn-default"
                                    data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form:form>

【问题讨论】：

欢迎来到 Stack Overflow！您的代码始终存在问题中，但读者看不到，因为您没有使用编辑器上的“格式化代码示例”按钮{}。我已经为您完成了，所以现在显示正常。如果您需要向问题添加更多信息，可以按edit 按钮。
嗨，hanu，你觉得我完全回答了你的问题吗？如果是这样，请不要忘记通过单击答案左侧的灰色复选标记将我的答案标记为“已接受”。如果您的问题没有得到完全回答，请详细说明您还需要了解什么，以便社区可以为您提供进一步的帮助！谢谢！

标签： html css

【解决方案1】：

要让复选框对齐，您可以在复选框输入元素上使用vertical-align: bottom 样式。为了防止复选框换行到下一行，您还可以在包含元素（在本例中为标签）上使用 white-space: nowrap。

这是一个活生生的例子：

#isInternalOrgPerson {
  vertical-align: bottom;
}

#isInternalOrgPersonLabel {
  white-space: nowrap;
}

<div class="checkbox">
  <label id="isInternalOrgPersonLabel">
    Internal Org Person:
    <input type="checkbox" path="isInternalOrgPerson" id="isInternalOrgPerson" value="">
  </label>
</div>

【讨论】：