如何阻止表单网格中的输入框撑满右侧区域？

云原生阿岚

2026-7-25

问题与修复方案

UI对比

当前UI:

目标UI:

问题描述

我该如何让右侧区域的输入元素不再撑满整个右侧区域？我认为问题出在.right-section form的网格列设置上。请查看以下HTML和CSS代码并给出建议，我完全不知道该如何修复。我曾尝试手动调整网格列宽度，使用固定px值（如200px 300px）时可以调整输入框宽度，但仍未解决问题——.grid-1和.grid-2容器缩小了，但.card-information容器没有。

代码展示

CSS代码

/* Root Var */
:root {
  /* Primary Colors */
  --active-input-color: linear-gradient(hsl(249, 99%, 64%), hsl(278, 94%, 30%));
  --error-color: hsl(0, 100%, 66%);
  /* Neutral Colors */
  --white: hsl(0, 0%, 100%);
  --light-grayish-violet: hsl(270, 3%, 87%);
  --dark-grayish-violet: hsl(279, 6%, 55%);
  --very-dark-violet: hsl(278, 68%, 11%);
  /* Mobile Width */
  --mobile-width: 375px;
}

/* Reset */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-size: 18px;
  font-family: 'Space Grotesk', sans-serif;
  background-image: url(/img/bg-main-desktop.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.right-section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50vw;
}

.right-section form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2rem;
}

.grid-1 {
  display: flex;
  flex-direction: column;
  grid-column: 1 / 3;
}

.grid-2 {
  display: flex;
  flex-direction: column;
  grid-column: 1 / 3;
}

.card-information {
  display: flex;
  flex-direction: row;
  grid-column: 1 / 3;
  gap: 1rem;
}

.card-date {
  display: flex;
  flex-direction: column;
}

.double-input {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.grid-3 {
  display: flex;
  flex-direction: column;
}

p {
  text-transform: uppercase;
  font-size: 11px;
}

input {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--light-grayish-violet);
  border-style: solid;
  border-color: var(--light-grayish-violet);
  border-radius: 5px;
}

#chname {
  height: 40px;
  text-indent: 1em;
}

#cnumber {
  height: 40px;
  text-indent: 1em;
}

#expdate-mm {
  height: 40px;
  text-indent: 1em;
}

#expdate-yy {
  height: 40px;
  text-indent: 1em;
}

#cvc {
  height: 40px;
  text-indent: 1em;
}

#button {
  color: var(--white);
  background-color: var(--very-dark-violet);
  height: 50px;
  align-self: center;
  border-radius: 10px;
  cursor: pointer;
  grid-column: 1 / 3;
}

.left-section {
  width: 50vw;
}

.card-details {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.card-display {
  color: var(--white);
  z-index: 1;
}

.card-number {
  position: relative;
  top: 0px;
  right: -120px;
  font-size: 28px;
  letter-spacing: 0.1rem;
}

.card-name {
  position: relative;
  top: 45px;
  right: 220px;
  font-size: 12px;
}

.card-expiry {
  position: relative;
  top: 45px;
  right: 20px;
  font-size: 12px;
}

.card-front-img {
  position: relative;
  top: 100px;
  left: 200px;
  z-index: 0;
}

.card-logo {
  position: relative;
  top: -60px;
  left: -210px;
}

/* Back of Credit Card */
.card-back-img {
  position: relative;
  top: 80px;
  left: 260px;
  z-index: 0;
}

.card-cvc {
  position: relative;
  top: -60px;
  left: 600px;
  font-size: 12px;
}

HTML代码

<div class="container">
  <div class="left-section">
    <section class="cards">
      <div class="card-front">
        <img src="/img/bg-card-front.png" alt="" class="card-front-img">
        <img src="/img/card-logo.svg" alt="" class="card-logo">
        <div class="card-details">
          <p class="card-display card-number">0000 0000 0000 0000</p>
          <p class="card-display card-name">Jane Appleseed</p>
          <p class="card-display card-expiry">00/00</p>
        </div>
      </div>
      <div class="card-back">
        <img src="/img/bg-card-back.png" alt="" class="card-back-img">
        <p class="card-display card-cvc">000</p>
      </div>
    </section>
  </div>
  <section class="right-section">
    <form action="">
      <div class="grid-1">
        <p id="chname-label">Cardholder Name</p>
        <input type="text" id="chname" name="chname" value="e.g. Jane Appleseed">
      </div>
      <div class="grid-2">
        <p id="cnumber-label">Card Number</p>
        <input type="text" id="cnumber" name="cnumber" value="e.g. 1234 5678 9999 0000">
      </div>
      <div class="card-information">
        <div class="card-date">
          <p id="expdate-label">EXP. DATE (MM/YY)</p>
          <div class="double-input">
            <div>
              <input type="text" id="expdate-mm" name="expdate" value="MM">
            </div>
            <div>
              <input type="text" id="expdate-yy" name="expdate" value="YY">
            </div>
          </div>
        </div>
        <div class="grid-3">
          <p id="cvc-label">CVC</p>
          <input type="text" id="cvc" name="cvc" value="e.g. 123">
        </div>
      </div>
      <input type="button" id="button" value="Confirm">
    </form>
  </section>
</div>

修复步骤

限制表单最大宽度：给表单设置固定最大宽度，避免它撑满右侧50vw区域，同时保留小屏幕自适应能力

.right-section form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2rem;
  max-width: 420px; /* 可根据目标UI微调 */
  width: 100%;
}

让输入框填满父容器：统一设置输入框宽度为100%，确保每个输入框都填满所在的网格项容器

input {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--light-grayish-violet);
  border-style: solid;
  border-color: var(--light-grayish-violet);
  border-radius: 5px;
  width: 100%; /* 新增 */
}

调整日期与CVC区域宽度比例：让两个区域的宽度分配更贴合目标UI

.card-information {
  display: flex;
  flex-direction: row;
  grid-column: 1 / 3;
  gap: 1rem;
}
.card-date {
  flex: 1;
}
.grid-3 {
  flex: 1.3; /* 让CVC区域更宽 */
}

这样修改后，表单整体会被限制在设定的宽度内，不会撑满右侧区域，同时输入框布局和目标UI一致。

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

如何阻止表单网格中的输入框撑满右侧区域？

UI对比 #

问题描述 #

代码展示 #

CSS代码 #

HTML代码 #