如何調整按鈕的大小以適應他的父母（響應式）？
[英]How to adapt the size of a button to his parent (responsive)?
問題描述
您好，我目前在將按鈕的大小調整為標題的大小時遇到問題。 事實上，我希望按鈕在寬度和高度方面保留在其標題中，具體取決於屏幕尺寸。 我嘗試使用 vh 和 vw 使按鈕適合屏幕大小，但它不起作用。
這是文件 HTML 和 CSS：
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); *{ font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box }:root{ /* ===== Colors ===== */ --body-color: #E4E9F7; --sidebar-color: #FFF; --primary-color: #1c1a1a; --primary-color-light: #F6F5FF; --toggle-color: #DDD; --text-color: #707070; /* ===== Transition ===== */ --tran-02: all 0.2s ease; --tran-03: all 0.3s ease; --tran-04: all 0.4s ease; --tran-05: all 0.5s ease; } body{ height: 100vh; background: var(--body-color); } /*Paramètres de la page des templates*/.home{ position: relative; height: 100vh; left: 78px; width: calc(100% - 78px); background: var(--body-color); transition: var(--tran-05); } /*Paramètre texte de la page*/.home.text{ font-size: 30px; font-weight: 500; color: var(--text-color); padding: 8px 40px; } /*Activer le mouvement de la page*/.sidebar.active ~.home{ left: 240px; width: calc(100% - 78px); } /*--------------------- FENETRE MODAL PARAMETRE ---------------------*/.modal-container-param{ display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #1c1a1a; background: rgba(0, 0, 0, 0.4); z-index: 1; }.parameter{ position: relative; top: 25%; background-color: rgb(170, 170, 170); margin: 100px auto; padding: 0; width: 300px; max-width: 85%; }.parameter.popup-header{ padding: 2px 16px; background-color: #ffffff; color: #1c1a1a; display: flex; }.parameter.popup-header h1{ font-size: 12px; font-family: Montserrat, sans-serif; font-weight: 500; }.parameter.close-modal{ position: absolute; top: 0px; right: 0px; font-size: 10px; padding: 1.5px 20px; border: none; border-radius: 0px; cursor: pointer; background: #fff; color: rgb(0, 0, 0); }.parameter.close-modal:hover{ color: #FFF; background: rgb(188, 15, 15); }.parameter.popup-body{ padding: 2px 16px; }.form{ width: 100%; }.form h1{ font-size: 17px; display: flex; justify-content: center; align-items: center; margin-top: 10px; font-family: Montserrat, sans-serif; font-weight: bold; }.form.input_field{ margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }.form.input_field label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.custom_select_c{ display: flex; align-items: center; justify-content: center; color: #11101d; font-size: 14px; }.form.custom_select_c select{ margin-top: 10px; margin-bottom: 2px; border: 1px solid #d5dbd9; width: 30%; height: 100%; padding: 1px 2px; border-radius: 3px; }.form.custom_select_l{ display: flex; align-items: center; justify-content: center; color: #11101d; font-size: 14px; }.form.custom_select_l select{ margin-bottom: 2px; border: 1px solid #d5dbd9; width: 30%; height: 100%; padding: 1px 2px; border-radius: 3px; }.form.custom_select_l label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.custom_select_c label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.input_field label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.input_field.input, .form.input_field.textarea{ width: 30%; outline: none; border: 1px solid #d5dbd9; font-size: 15px; padding:1px 2px; border-radius: 3px; transition: all 0.3s ease; }.form.input_field.btn{ width: 100%; padding: 8px 10px; font-size: 15px; border: 0; background: #707070; color: #FFF; cursor: pointer; outline: none; }.form.input_field.btn:hover{ background: #11101d; color: #FFF; }.form.link{ margin-top: 10px; }.tcp{ display: none; }.tcp.active{ display:block; }.udp{ display: none; }.udp.active{ display:block; }.serie{ display: none; }.serie.active{ display:block; }
<:DOCTYPE html> <html> <head> <meta charset="UTF-8"> <.-- https.//developer,mozilla.org/en-US/docs/Web/HTTP/CSP --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <:-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'. script-src 'self'"> --> <.----===== CSS ===== --> <link rel="stylesheet" href="style.css"> <.----===== Boxicons CSS ===== --> <link href='https.//unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <title>Sail Vision</title> </head> <body> <div class="modal-container-param"> <div class="overlay"> <div class="parameter"> <div class="popup-header"> <button class="close-modal modal-trigger-param">X</button> <h1>Paramétres de liaisons</h1> </div> <div class="popup-body"> <div class="form"> <div class="custom_select_c"> <label>Type de centrale</label> <select name="selectc" class="selectc"> <option value="nmea" selected>NMEA</option> <option value="nke">NKE</option> <option value="bravo" >BRAVO</option> </select> </div> <div class="custom_select_l"> <label>Type de liaisons</label> <select class="selectl" name="selectl"> <option value="serie" selected>SERIE</option> <option value="udp">UDP</option> <option value="tcp" >TCP</option> </select> </div> <div class="link"> <div class="udp udp-input" id="u"> <div class="input_field"> <label>Numero de port IN</label> <input type="text" class="input"> </div> </div> <div class="serie serie-input" id="s"> <div class="input_field"> <label>Com</label> <input type="text" class="input"> </div> </div> <div class="tcp tcp-input" id="t"> <div class="input_field"> <label>Adresse IP</label> <input type="text" class="input"> </div> <div class="input_field"> <label>Numero de port</label> <input type="text" class="input"> </div> </div> </div> <div class="input_field"> <input type="submit" value="Connect" class="btn"> </div> </div> </div> </div> </div> </div> </body> </html>
問候，
2 個解決方案
解決方案1
3 已采納 2022-12-20 11:55:24
具有相對定位的標記元素使您可以控制絕對定位其內部的子元素。 因此，添加相對於“popup-header”類的位置，並將“.parameter.close-modal”類的高度設置為 100%，這樣它將占據其父級高度的 100%：
.parameter .popup-header {
padding: 2px 16px;
background-color: #ffffff;
color: #1c1a1a;
display: flex;
position: relative;
}
.parameter .close-modal {
position: absolute;
top: 0px;
right: 0px;
font-size: 10px;
padding: 1.5px 20px;
border: none;
border-radius: 0px;
cursor: pointer;
background: #fff;
color: rgb(0, 0, 0);
height: 100%;
}
解決方案2
1 2022-12-20 11:59:09
復制此代碼。 它現在應該工作了。 如果沒有，請在評論中告訴我。
如果將子元素設置為
position: absolute;父元素必須設置為position: relative;. 否則絕對定位會出問題。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); *{ font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box }:root{ /* ===== Colors ===== */ --body-color: #E4E9F7; --sidebar-color: #FFF; --primary-color: #1c1a1a; --primary-color-light: #F6F5FF; --toggle-color: #DDD; --text-color: #707070; /* ===== Transition ===== */ --tran-02: all 0.2s ease; --tran-03: all 0.3s ease; --tran-04: all 0.4s ease; --tran-05: all 0.5s ease; } body{ height: 100vh; background: var(--body-color); } /*Paramètres de la page des templates*/.home{ position: relative; height: 100vh; left: 78px; width: calc(100% - 78px); background: var(--body-color); transition: var(--tran-05); } /*Paramètre texte de la page*/.home.text{ font-size: 30px; font-weight: 500; color: var(--text-color); padding: 8px 40px; } /*Activer le mouvement de la page*/.sidebar.active ~.home{ left: 240px; width: calc(100% - 78px); } /*--------------------- FENETRE MODAL PARAMETRE ---------------------*/.modal-container-param{ display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #1c1a1a; background: rgba(0, 0, 0, 0.4); z-index: 1; }.parameter{ position: relative; top: 25%; background-color: rgb(170, 170, 170); margin: 100px auto; padding: 0; width: 300px; max-width: 85%; }.parameter.popup-header{ padding: 2px 16px; background-color: #ffffff; color: #1c1a1a; display: flex; position: relative; }.parameter.popup-header h1{ font-size: 12px; font-family: Montserrat, sans-serif; font-weight: 500; }.parameter.close-modal{ position: absolute; top: 0px; right: 0px; font-size: 10px; padding: 1.5px 20px; border: none; border-radius: 0px; cursor: pointer; background: #fff; color: rgb(0, 0, 0); }.parameter.close-modal:hover{ color: #FFF; background: rgb(188, 15, 15); }.parameter.popup-body{ padding: 2px 16px; }.form{ width: 100%; }.form h1{ font-size: 17px; display: flex; justify-content: center; align-items: center; margin-top: 10px; font-family: Montserrat, sans-serif; font-weight: bold; }.form.input_field{ margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }.form.input_field label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.custom_select_c{ display: flex; align-items: center; justify-content: center; color: #11101d; font-size: 14px; }.form.custom_select_c select{ margin-top: 10px; margin-bottom: 2px; border: 1px solid #d5dbd9; width: 30%; height: 100%; padding: 1px 2px; border-radius: 3px; }.form.custom_select_l{ display: flex; align-items: center; justify-content: center; color: #11101d; font-size: 14px; }.form.custom_select_l select{ margin-bottom: 2px; border: 1px solid #d5dbd9; width: 30%; height: 100%; padding: 1px 2px; border-radius: 3px; }.form.custom_select_l label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.custom_select_c label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.input_field label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.input_field.input, .form.input_field.textarea{ width: 30%; outline: none; border: 1px solid #d5dbd9; font-size: 15px; padding:1px 2px; border-radius: 3px; transition: all 0.3s ease; }.form.input_field.btn{ width: 100%; padding: 8px 10px; font-size: 15px; border: 0; background: #707070; color: #FFF; cursor: pointer; outline: none; }.form.input_field.btn:hover{ background: #11101d; color: #FFF; }.form.link{ margin-top: 10px; }.tcp{ display: none; }.tcp.active{ display:block; }.udp{ display: none; }.udp.active{ display:block; }.serie{ display: none; }.serie.active{ display:block; }
<:DOCTYPE html> <html> <head> <meta charset="UTF-8"> <.-- https.//developer,mozilla.org/en-US/docs/Web/HTTP/CSP --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <:-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'. script-src 'self'"> --> <.----===== CSS ===== --> <link rel="stylesheet" href="style.css"> <.----===== Boxicons CSS ===== --> <link href='https.//unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <title>Sail Vision</title> </head> <body> <div class="modal-container-param"> <div class="overlay"> <div class="parameter"> <div class="popup-header"> <button class="close-modal modal-trigger-param">X</button> <h1>Paramétres de liaisons</h1> </div> <div class="popup-body"> <div class="form"> <div class="custom_select_c"> <label>Type de centrale</label> <select name="selectc" class="selectc"> <option value="nmea" selected>NMEA</option> <option value="nke">NKE</option> <option value="bravo" >BRAVO</option> </select> </div> <div class="custom_select_l"> <label>Type de liaisons</label> <select class="selectl" name="selectl"> <option value="serie" selected>SERIE</option> <option value="udp">UDP</option> <option value="tcp" >TCP</option> </select> </div> <div class="link"> <div class="udp udp-input" id="u"> <div class="input_field"> <label>Numero de port IN</label> <input type="text" class="input"> </div> </div> <div class="serie serie-input" id="s"> <div class="input_field"> <label>Com</label> <input type="text" class="input"> </div> </div> <div class="tcp tcp-input" id="t"> <div class="input_field"> <label>Adresse IP</label> <input type="text" class="input"> </div> <div class="input_field"> <label>Numero de port</label> <input type="text" class="input"> </div> </div> </div> <div class="input_field"> <input type="submit" value="Connect" class="btn"> </div> </div> </div> </div> </div> </div> </body> </html>
如何使父元素的大小與他的孩子的大小完全相同，而他的孩子絕對位於祖父母的位置？
[英]How to make parent element the same size as his child which is absolutely positioned to his grandparent?
對響應式網格的任何建議，將適應不同瀏覽器的文本大小和布局？
[英]Any suggestions for a responsive grid that will adapt text size and layout for different browsers?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.