Wie verhindere ich, dass sich die Eingabefelder in meinem Raster auf dem Bildschirm ausdehnen?

Question

Aktuelle Benutzeroberfläche:

Erforderliche Benutzeroberfläche:

Wie kann ich verhindern, dass sich ein Eingabeelement im rechten Abschnitt auf den gesamten rechten Abschnitt erstreckt? Ich denke, das Problem liegt an den Rasterspalten in meinem Formular für den rechten Abschnitt

Bitte schauen Sie sich den HTML- und CSS-Code an und sagen Sie mir, ich habe absolut keine Ahnung, wie ich das beheben kann.

/* 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;
  /* Add bg image in CSS, here, inside body */
  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: 140px;
    left: 230px; */
  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;
}

<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>

Ich habe versucht, die Breite der Rasterspalte manuell anzupassen, und es hat irgendwie funktioniert. Ich kann die Breite der Eingabe manipulieren, wenn ich für beide Spalten feste px-Werte verwende (z. B. 200px 300px), aber das löst mein Problem immer noch nicht.

Die Div-Klassen .grid-1 und .grid-2 (die diese Eingabe enthalten) werden verkleinert, .card-information jedoch nicht.

Answer 1

有点难以说出您要问的内容，但如果您只想限制表单输入的宽度，请尝试在表单元素上设置定义的宽度（即 .right-section form {width : 70%;} 或输入的父容器（即 .grid-1、.grid-2、.card-information {width: 70%;}）。根据需要进行调整.