Css 如何获得<；span>；元素与它旁边的元素对齐？

我对CSS比较陌生，我有一个奇怪的问题：

为什么我的“忘记密码”范围比“记住我”范围大

下面是React组件DOM：

<div>
    <div id="loginTitle">
        <h2>Welcome</h2>
        <h1>Login</h1>
    </div>
    <div id="loginForm">
        <form onSubmit={login}>
            <label> Username:
                <input id="username" type="text" className="loginBox" ref = {node => user = node}/>
            </label>
            <label> Password:
                <input id="password" type="password" className="loginBox" ref = {node => pass = node}/>
            </label>
            <br />
            <div>
                <span id="loginCheck">
                    <input type="checkbox" id="rememberMe"/>
                    <label for="rememberMe">Remember Me</label>
                </span>
                <span id="forgotPass">Forgot Password?</span>
            </div>
            <input id="loginSubmit" type="submit" value="Sign In" />  
        </form>
    </div>
</div>

---

如何使忘记的密码跨距与其旁边的跨距对齐？

问题可能是因为两个跨距的高度不同，因为第一个跨距有一个复选框。您可以通过使用

flexbox

将两个跨距在容器中居中对齐来解决此问题

将包含您的

的类添加到

中：

<div class="some_class">
    <span id="loginCheck">
        <input type="checkbox" id="rememberMe"/>
        <label for="rememberMe">Remember Me</label>
    </span>
    <span id="forgotPass">Forgot Password?</span>
</div>

<div class="some_class">
    <span id="loginCheck">
        <input type="checkbox" id="rememberMe"/>
        <label for="rememberMe">Remember Me</label>
    </span>
    <span id="forgotPass">Forgot Password?</span>
</div>

.some_class {
    display: flex;
    justify-content: space-between;
    align-items: center;
}