Question

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

＆＃13;

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

＆＃13;

但复选框未与标签对齐。

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

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

Answer 1

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

这是一个实例：

＆＃13;

#isInternalOrgPerson {
  vertical-align: bottom;
}

#isInternalOrgPersonLabel {
  white-space: nowrap;
}

＆＃13;

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

＆＃13;

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

1 个答案: