前端表单布局求助：单选框/复选框排版及背景图显示异常

问题1：Radio按钮与label无法同行显示 #

原因：全局input样式设置了display: block，虽给radio按钮添加了.labelr类，但未覆盖display属性，导致radio仍为块级元素，无法与label同行。

修复：给.labelr添加行内块级显示属性，同时给.radio-option设置弹性布局确保对齐：

.labelr {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
  display: inline-block; /* 覆盖全局的display:block */
}

.radio-option {
  display: flex; /* 让radio和label横向对齐 */
  align-items: center;
  margin: 0.5em 0; /* 调整选项间距 */
}

.radio-option label {
  margin: 0; /* 去掉全局label的margin，避免间距过大 */
}

问题2：窗口缩小时Checkbox与label重叠 #

原因：全局label设置了margin-right: -200px的不合理负边距，导致label被强行左移，与checkbox重叠。

修复：移除负边距，调整checkbox的布局属性：

/* 删除原负边距设置，保留必要样式 */
label {
  font-family: 'Poppins', sans-serif;
  color: white;
  margin: 2em;
  font-size: 1.2rem;
  font-weight: 400;
  padding-right: 5px;
}

input[type="checkbox"] {
  margin-left: 0;
  width: unset; /* 覆盖全局input的width:90% */
  display: inline-block; /* 确保checkbox为行内块级元素 */
}

.check-option {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  margin-left: 2em; /* 和其他元素保持一致的左侧间距 */
}

.check-option label {
  margin: 0; /* 去掉全局label的margin，避免间距过大 */
}

问题3：背景图片显示被放大，无法匹配示例效果 #

原因：未设置背景图片的尺寸、重复及定位属性，默认按原始尺寸平铺，导致视觉上被放大。

修复：给body添加背景图片相关控制属性：

body {
  box-sizing: border-box;
  background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: white; /* 修复未定义的var(--color-white) */
  margin: 0;
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-repeat: no-repeat; /* 禁止图片重复平铺 */
  background-position: center; /* 图片居中显示 */
  min-height: 100vh; /* 确保背景覆盖整个视口高度 */
}

完整修改后代码 #

CSS代码 #

body {
  box-sizing: border-box;
  background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: white;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 100vh;
}

input {
  display: block;
  margin: 2em;
  width: 90%;
}

.labelr {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
  display: inline-block;
}

.radio-option {
  display: flex;
  align-items: center;
  margin: 0.5em 0;
}

.radio-option label {
  margin: 0;
}

select {
  margin: 2em;
  display: block;
  width: 90%;
}

.radio {
  border: none;
  padding: 2em;
}

form {
  width: 70vw;
  margin: auto auto;
  background-color: rgba(27, 27, 50, 0.8);
  max-width: 800px;
  min-width: 300px;
  padding-top: 2em;
  border-radius: 0.3rem;
  padding-bottom: 2em;
}

label {
  font-family: 'Poppins', sans-serif;
  color: white;
  margin: 2em;
  font-size: 1.2rem;
  font-weight: 400;
  padding-right: 5px;
}

h1 {
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

p {
  font-size: 1.125rem;
  text-align: center;
  color: white;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.check-option {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  margin-left: 2em;
}

.check-option label {
  margin: 0;
}

input[type="checkbox"] {
  margin-left: 0;
  width: unset;
  display: inline-block;
}

.bio {
  display: block;
}

textarea {
  margin: 2.5em;
  margin-top: -20px;
  width: 85%;
}

.submit-button {
  display: block;
  width: 90%;
  padding: 1.5rem;
  background: #37af65;
  color: white;
  border-radius: 2px;
  cursor: pointer;
  margin: 0 auto;
  border: none;
}

HTML代码 #

<html>
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
</head>
<body>
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve the platform</p>
  <form id="survey-form">
    <label id="name-label" for="name">Name</label>
    <input required id="name" type="text" placeholder="enter your name" />
    
    <label id="email-label" for="email">Email</label>
    <input required id="email" type="email" placeholder="enter your email" />
    
    <label id="number-label" for="number">Age(optional)</label>
    <input id="number" type="number" min="18" max="120" placeholder="age" />
    
    <label for="dropdown">Which option best describes your current role?</label>
    <select id="dropdown">
      <option value="student">Student</option>
      <option value="fulltime-job">Fulltime Job</option>
      <option value="fulltime-learner">Full Time Learner</option>
      <option value="prefer-not-to-say">Prefer not to say</option>
      <option value="other">Other</option>
    </select>
    
    <fieldset class="radio">
      <label>Would you recommend freeCodeCamp to a friend?</label>
      <div class="radio-option">
        <input type="radio" name="radio" value="definitely" class="labelr" id="definitely" />
        <label for="definitely">Definitely</label>
      </div>
      <div class="radio-option">
        <input type="radio" name="radio" value="maybe" class="labelr" id="maybe" />
        <label for="maybe">Maybe</label>
      </div>
      <div class="radio-option">
        <input type="radio" name="radio" value="not-sure" class="labelr" id="not-sure" />
        <label for="not-sure">Not sure</label>
      </div>
    </fieldset>
    
    <div class="check-option">
      <label for="frontend">Frontend Projects</label>
      <input type="checkbox" id="frontend" value="frontend" />
    </div>
    <div class="check-option">
      <label for="backend">Backend Projects</label>
      <input type="checkbox" id="backend" value="backend" />
    </div>
    
    <label for="bio" class="bio">Any comments or suggestions?</label>
    <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
    
    <input type="submit" value="Submit" class="submit-button" id="submit" />
  </form>
</body>
</html>

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