如何用基础HTML和CSS实现'Remember Me'单行显示及CSS线性渐变

一、让"记住我"文本与复选框同行的解决方案 #

你当前给所有<p>设置display: inline会导致所有段落（比如Email、Password的标签）都变成行内元素，不符合表单布局逻辑。正确做法是针对复选框区域单独处理，同时用语义化的<label>标签关联复选框，既方便样式控制也提升可访问性：

修改后的HTML结构 #

<div class="box">
  <div class="one">
    <h2>Login Form</h2>
    <p>Email:</p>
    <input type="text" name="email" class="textbox">
    <p>Password:</p>
    <input type="password" name="password" class="textbox">
    <!-- 用label包裹文本，通过for属性关联复选框 -->
    <div class="remember-me">
      <input type="checkbox" id="remember">
      <label for="remember">记住我</label>
    </div>
    <input type="submit" name="submit" value="Login" class="button">
  </div>
</div>

对应CSS代码 #

/* 保留p标签加粗样式，取消全局inline设置 */
p {
  font-weight: bold;
}

/* 控制复选框与文本的布局 */
.remember-me {
  display: flex;
  align-items: center;
  gap: 8px; /* 复选框和文本的间距 */
}

如果坚持用你原来的<p>包裹结构，只需给该p单独设置样式，不要全局影响所有p：

p {
  font-weight: bold;
}

/* 给包含复选框的p加类名，比如class="checkbox-wrap" */
.checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

二、CSS线性渐变的实现方法 #

线性渐变通过background-image: linear-gradient()属性实现，可自由定义方向、颜色节点：

基础语法示例 #

/* 从左到右的蓝红渐变 */
.element {
  background-image: linear-gradient(to right, #007bff, #dc3545);
}

/* 从上到下的渐变（默认方向） */
.element {
  background-image: linear-gradient(#ffffff, #f0f0f0);
}

/* 45度角的黄绿渐变 */
.element {
  background-image: linear-gradient(45deg, #ffc107, #28a745);
}

/* 带颜色位置的渐变：0%蓝，50%紫，100%粉 */
.element {
  background-image: linear-gradient(to bottom, #007bff 0%, #6f42c1 50%, #e83e8c 100%);
}

实际应用（给登录按钮加渐变） #

.button {
  background-image: linear-gradient(to right, #007bff, #0056b3);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* 鼠标悬停切换渐变方向 */
.button:hover {
  background-image: linear-gradient(to left, #007bff, #0056b3);
}

也可以给表单容器加渐变背景：

.box {
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  border-radius: 8px;
}

内容的提问来源于stack exchange，提问作者Denil Shaji