Question

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

我的CSS：

body {
  padding: 0;
  font-family: sans-serif;
}    
#loginTitle {
  margin: auto;
  text-align: center;
}    
#loginTitle h1 {
  color: #4971b2;
}    
#loginForm {
  margin: auto;
  width: 200px;
  font-size: 10px;
}    
#loginSubmit {
  width: 100%;
  display: block;
  background-color: #4971b2;
  color: white;
}    
.loginBox {
  width: 100%;
  display: block;
}    
#forgotPass {
  float: right;
}
#loginCheck {
  float: left;
}

如何让忘记密码范围与旁边的范围对齐？

Answer 1

问题可能是因为两个跨度都有不同的高度，因为第一个有一个复选框。您可以使用flexbox对其容器中的两个跨度进行居中对齐来解决此问题。

向包含<div> s：

的<span>添加课程

<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>上设置以下样式：

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

如何让<span>元素与旁边的元素对齐？

1 个答案: