如何用CSS实现表单置于垂直白色块的页面布局

步骤1：修改HTML结构 #

给表单外层添加一个容器div，用于承载白色背景样式：

<div class="form-container">
  <form class="form-horizontal">
    <center>
      <h4>Start Tracking A Product </h4>
    </center>
    <center>
      <p>* = required</p>
    </center>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We Will Notify This Email When The Target Price Is Reached.</small>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Target Price</label>
      <input type="number" class="form-control" id="exampleInputPassword1" placeholder="Ex: 250">
    </div>

    <center><button type="submit" class="btn btn-primary">     Start Track    </button></center>
  </form>
</div>

步骤2：更新CSS样式 #

添加容器的白色背景样式，并调整表单宽度以填满容器：

/* 新增白色容器样式 */
.form-container {
  width: 50%;
  margin: 2rem auto;
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 8px; /* 可选：添加圆角提升视觉效果 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* 可选：添加阴影增强层次感 */
}

/* 修改原表单样式，让表单填满容器 */
.form-horizontal {
  display: block;
  width: 100%;
  margin: 0;
}

%transition {
  transition: background .35s ease;
}

/*Base*/
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #eecda3 0%, #ef629f 100%);
}

/*Typography*/
html {
  font: 16px Verdana;
}

h1 {
  font-size: 1.2em;
}

li {
  font-size: 1em;
}

/*Dropdown*/
.dropdown {
  margin: 2em auto;
  width: 14.5em;
  border: .1em solid #c0cdd1;
}

a {
  display: block;
  padding: .5em;
  color: #000;
  text-decoration: none;
  @extend %transition;
  &:focus,
  &:hover {
    background: #ecf0f1;
  }
  &:active {
    background: #fbfcfc;
  }
}

.da {
  float: right
}

/*List*/
ul {
  display: none;
  border-top: .1em solid #c0cdd1;
}

li {
  padding: .5em;
  cursor: pointer;
  @extend %transition;
  &:not(:first-child) {
    border-top: .1em dashed #dde4e6;
  }
  &:last-child {
    color: #ad0000;
  }
  &:focus,
  &:hover {
    background: #ecf0f1;
  }
  &:active {
    background: #fbfcfc;
  }
}

修改完成后，白色容器会完整包裹表单，渐变背景仅显示在容器外部，符合预期效果。

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