[英]How to make form responsive in css?
我有一個截圖,如下所示,我必須在HTML / CSS中進行復制。 下面的屏幕快照在桌面視圖和移動視圖中應該看起來完全相同 。
目前,我能夠在桌面視圖中顯示該小提琴 ,但在移動視圖中可以在右側看到白色間距 。
我想我需要在下面的CSS代碼中進行一些更改,但是不確定這是否是需要更改的正確類。
.login-page .form .login-form .add-winner {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #1173B7;
background-color: white;
color: #1173B7;
font-size: 14px;
width: 25%;
font-weight: bold;
font-family: "Open Sans";
outline: 0;
border-radius: 20px;
padding: 10px;
cursor: pointer;
margin-bottom: 6%;
}
.login-page .form .login-form .save {
display: block;
margin-left: auto;
margin-right: auto;
background-color: #C4C4C4;
border: 1px;
color: white;
font-size: 14px;
width: 35%;
font-weight: bold;
font-family: "Open Sans";
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
margin-bottom: 6%;
}
問題陳述:
我想知道我應該對CSS進行哪些更改,以便上述設計在移動和桌面視圖中看起來完全相同。
此刻,我在移動視圖中看到右側的空白。
您的form
元素的靜態寬度設置為500px。
將其更改為:
form {
max-width: 500px;
width: 100%;
}
添加此內容也可能會有所幫助,因此寬度計算中將包含填充:
form {
box-sizing: border-box;
}
只需將第52行的CSS更改為:
.form {
background: #FFFFFF;
width: 100%;
height: 500px;
max-width: 500px;
margin: 0 auto 100px;
box-sizing: border-box;
padding: 50px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0,
0.24);
}
我為您的表單設置了最大寬度,以便跨過500px寬度時將表單的寬度設置為500px。 否則,它將是瀏覽器區域寬度的100%。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.