Antaramuka Pengguna Semasa:
Antaramuka Pengguna Diperlukan:
Bagaimana untuk membuat elemen input di bahagian kanan berhenti meluas ke seluruh bahagian kanan? Saya rasa masalahnya ialah lajur grid dalam borang .bahagian kanan saya
Sila lihat HTML dan CSS dan beritahu saya, saya langsung tidak tahu bagaimana untuk membetulkannya.
/* 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; }
![]()
![]()
0000 0000 0000 0000
Jane Appleseed
00/00
![]()
000
Saya cuba melaraskan lebar lajur grid secara manual dan ia berjaya. Saya boleh memanipulasi lebar input apabila menggunakan nilai px tetap untuk kedua-dua lajur (iaitu 200px 300px), tetapi ia masih tidak menyelesaikan masalah saya.
Kelas div .grid-1 dan .grid-2 (mengandungi input tersebut) mengecut, tetapi .kad-maklumat tidak.
Agak sukar untuk memberitahu perkara yang anda tanyakan, tetapi jika anda hanya mahu mengehadkan lebar input borang, cuba tetapkan lebar yang ditentukan pada elemen borang (iaitu
.right-section form {width : 70%;}
或输入的父容器(即.grid-1、.grid-2、.card-information {width: 70%;}
). Laraskan mengikut keperluan.