如何在我的網站中制作響應式輸入/按鈕？

Question

我正在制作我的第一個網站，我想制作像這里一樣的聯系頁面（ https://62bc5048ee1d4.site123.me ），我已經做到了，直到媒體查詢意味着它可以，直到我的屏幕尺寸不小於 1000 像素，當我的場景小於 1000 像素時，我的按鈕會切到右側，並且我的網站左側有一些空間（它沒有響應但居中）。這是我的 HTML 和 CSS 代碼：

 body { margin: 0; padding: 0; background-color: #f1f1f1; } .topper-header { padding-top: 50px; text-align: center; font-size: 250%; font-weight: 25; text-decoration: underline cyan; } .container { overflow: hidden; margin: auto; } #part4 { display: flex; justify-content: center; align-items: center; background-color: #f1f1f1; padding-bottom: 100px; } .place-name { text-align: center; padding-right: 200px; } .row1 { font-size: 15px; margin-left: 20px; width: 230px; height: 30px; border-style: groove; border-radius: 3px; } .row2 { margin-top: 15px; border-radius: 3px; font-size: 15px; height: 30px; width: 490px; float: right; border-style: groove; } .row3 { margin-top: 15px; border-radius: 3px; border-style: groove; font-size: 15px; height: 100px; width: 490px; float: right; } #contact-input { margin-left: 50px; border-radius: 3px; } .row4 { font-weight: 10; border-radius: 3px; background-color: #00ced1; font-size: 20px; float: right; padding-right: 192px; border-radius: 3px; padding-left: 192px; padding-top: 10px; padding-bottom: 10px; margin-top: 140px; margin-right: -500px; }

 <section id="part4"> <div class="container"> <h1 class="topper-header">CONTACT</h1> <div id="contact-input"> <div class="first-row"> <span class="place-name">Zagatala,Zagatala City,Azerbaijan</span> <input class="row1" type="text" placeholder="Name" required> <input class="row1" type="text" placeholder="Phone"> </div> <div class="second-row"> <input class="row2" type="email" placeholder="Email address"> </div> <div class="third-row"> <textarea class="row3" placeholder="Message"></textarea> <button class="row4">CONTACT US</button> </div> </div> </div> </section>

Answer 1

該按鈕有float: right; 作為.row4的一部分。 我添加了一個媒體查詢讓它向左浮動。

 body { margin: 0; padding: 0; background-color: #f1f1f1; } .topper-header { padding-top: 50px; text-align: center; font-size: 250%; font-weight: 25; text-decoration: underline cyan; } .container { overflow: hidden; margin: auto; } #part4 { display: flex; justify-content: center; align-items: center; background-color: #f1f1f1; padding-bottom: 100px; } .place-name { text-align: center; padding-right: 200px; } .row1 { font-size: 15px; margin-left: 20px; width: 230px; height: 30px; border-style: groove; border-radius: 3px; } .row2 { margin-top: 15px; border-radius: 3px; font-size: 15px; height: 30px; width: 490px; float: right; border-style: groove; } .row3 { margin-top: 15px; border-radius: 3px; border-style: groove; font-size: 15px; height: 100px; width: 490px; float: right; } #contact-input { margin-left: 50px; border-radius: 3px; } .row4 { font-weight: 10; border-radius: 3px; background-color: #00ced1; font-size: 20px; float: right; padding-right: 192px; border-radius: 3px; padding-left: 192px; padding-top: 10px; padding-bottom: 10px; margin-top: 140px; margin-right: -500px; } /* Added */ @media (max-width: 1000px) { .row4 { float: left; } }

 <section id="part4"> <div class="container"> <h1 class="topper-header">CONTACT</h1> <div id="contact-input"> <div class="first-row"> <span class="place-name">Zagatala,Zagatala City,Azerbaijan</span> <input class="row1" type="text" placeholder="Name" required> <input class="row1" type="text" placeholder="Phone"> </div> <div class="second-row"> <input class="row2" type="email" placeholder="Email address"> </div> <div class="third-row"> <textarea class="row3" placeholder="Message"></textarea> <button class="row4">CONTACT US</button> </div> </div> </div> </section>