如何让 <span> 元素与它旁边的元素对齐？ [复制]答案

【问题标题】：How to get <span> element to align with element next to it? [duplicate]如何让 <span> 元素与它旁边的元素对齐？ [复制]
【发布时间】：2018-11-10 23:01:07
【问题描述】：

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

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

【问题讨论】：

jsfiddle.net/Hastig/L07cudh9

标签： css

【解决方案1】：

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

向包含您的<span>s 的<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>

在包含跨度的<div> 上设置以下样式：

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

【讨论】：