因此，我在表單中進行了此登錄以進行練習，但是在較小的螢屏上創建按鈕時遇到了問題，它將整個表單設定為影片一點，我不知道為什么我嘗試在我為的@media 查詢上設定無過渡更寬的螢屏尺寸并嘗試在其上放置過渡，但它沒有作業我什至嘗試將它放在它自己的容器上但它沒有作業。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 65.5%;
font-family: 'Times New Roman', Times, serif;
}
body {
line-height: 1.4;
font-size: 1.5rem;
}
.learn {
display: grid;
place-items: center;
grid-template-columns: 1fr;
height: 100vh;
}
@media(min-width:85rem) {
.learn .bg-color-container {
max-width: 40rem;
width: 100%;
}
.bg-color-container button {
max-width: 100%;
width: 420px;
padding: 2rem 0;
}
}
form .input__data {
display: flex;
flex-direction: column;
padding: 1rem 0;
position: relative;
top: -2.1rem;
width: 100%;
}
.bg-color-container {
background-color: rgb(236, 244, 243);
width: 100%;
max-width: 400px;
padding: 5rem 1.8rem;
border-radius: 1.2rem;
box-shadow: 0 8px 8px 5px rgb(0, 0, 0, 0.5);
}
.dec-adder h1 {
position: relative;
top: -3rem;
max-width: 250px;
font-size: 3.1rem;
}
input {
padding: 1.2rem;
margin-top: .4rem;
}
[type=email],
[type=password] {
background: #ffffff;
border: none;
border-radius: .5rem;
}
.separate-content {
position: relative;
top: -2.1rem;
}
.separate-content input {
margin-right: 0.5rem;
font-weight: bolder;
}
form button {
max-width: 100%;
width: 320px;
padding: 1.5rem 0;
border-radius: 1rem;
border: none;
background: #fff;
transition: 2s ease-in;
cursor: pointer;
color: black;
}
form button:hover {
background-color: #7c47c0;
color: #fff;
}
form label {
font-weight: bold;
}<section class="learn">
<div class="bg-color-container dec-adder">
<h1>Sign in with your credentials</h1>
<form action="#" method="post">
<div class="input__data">
<label for="Email">Email Address</label>
<input type="email" name="email" id="Email" autofocus required placeholder="Your Address">
</div>
<div class="input__data">
<label for="lg-password">Enter Passward</label>
<input type="password" name="Security-Passcode" id="lg-password" required>
</div>
<label class="separate-content" for="lg-remember">
<input type="checkbox" name="lg-remember" id="lg-remember" required> Remember Me
</label>
<div><button type="submit ">Sign Up</button></div>
</form>
</div>
</section>uj5u.com熱心網友回復：
只需padding: 2rem 0;從.bg-color-container button媒體查詢下洗掉即可。該填充增加了按鈕的高度，并且整個表單需要縮小或增長以適應添加或減去的填充。如果您仍然需要填充，我建議.bg-color-container button在媒體查詢之外添加一個新的 CSS，它會一直存在。
看看這里：
顯示代碼片段
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 65.5%;
font-family: 'Times New Roman', Times, serif;
}
body {
line-height: 1.4;
font-size: 1.5rem;
}
.learn {
display: grid;
place-items: center;
grid-template-columns: 1fr;
height: 100vh;
}
@media(min-width:85rem) {
.learn .bg-color-container {
max-width: 40rem;
width: 100%;
}
.bg-color-container button {
max-width: 100%;
width: 420px;
}
}
form .input__data {
display: flex;
flex-direction: column;
padding: 1rem 0;
position: relative;
top: -2.1rem;
width: 100%;
}
.bg-color-container {
background-color: rgb(236, 244, 243);
width: 100%;
max-width: 400px;
padding: 5rem 1.8rem;
border-radius: 1.2rem;
box-shadow: 0 8px 8px 5px rgb(0, 0, 0, 0.5);
}
.dec-adder h1 {
position: relative;
top: -3rem;
max-width: 250px;
font-size: 3.1rem;
}
input {
padding: 1.2rem;
margin-top: .4rem;
}
[type=email],
[type=password] {
background: #ffffff;
border: none;
border-radius: .5rem;
}
.separate-content {
position: relative;
top: -2.1rem;
}
.separate-content input {
margin-right: 0.5rem;
font-weight: bolder;
}
form button {
max-width: 100%;
width: 320px;
padding: 1.5rem 0;
border-radius: 1rem;
border: none;
background: #fff;
transition: 2s ease-in;
cursor: pointer;
color: black;
}
form button:hover {
background-color: #7c47c0;
color: #fff;
}
form label {
font-weight: bold;
}
.bg-color-container button {
padding: 2rem 0;
}<section class="learn">
<div class="bg-color-container dec-adder">
<h1>Sign in with your credentials</h1>
<form action="#" method="post">
<div class="input__data">
<label for="Email">Email Address</label>
<input type="email" name="email" id="Email" autofocus required placeholder="Your Address">
</div>
<div class="input__data">
<label for="lg-password">Enter Passward</label>
<input type="password" name="Security-Passcode" id="lg-password" required>
</div>
<label class="separate-content" for="lg-remember">
<input type="checkbox" name="lg-remember" id="lg-remember" required> Remember Me
</label>
<div><button type="submit ">Sign Up</button></div>
</form>
</div>
</section>但是，如果您仍然希望按鈕的高度也增加而不影響表單的其余部分，我建議為div包含按鈕的類分配一個類，然后給該 div 一個固定的高度。像這樣：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 65.5%;
font-family: 'Times New Roman', Times, serif;
}
body {
line-height: 1.4;
font-size: 1.5rem;
}
.learn {
display: grid;
place-items: center;
grid-template-columns: 1fr;
height: 100vh;
}
@media(min-width:85rem) {
.learn .bg-color-container {
max-width: 40rem;
width: 100%;
}
.bg-color-container button {
max-width: 100%;
width: 420px;
padding: 2rem 0;
}
}
form .input__data {
display: flex;
flex-direction: column;
padding: 1rem 0;
position: relative;
top: -2.1rem;
width: 100%;
}
.bg-color-container {
background-color: rgb(236, 244, 243);
width: 100%;
max-width: 400px;
padding: 5rem 1.8rem;
border-radius: 1.2rem;
box-shadow: 0 8px 8px 5px rgb(0, 0, 0, 0.5);
}
.dec-adder h1 {
position: relative;
top: -3rem;
max-width: 250px;
font-size: 3.1rem;
}
input {
padding: 1.2rem;
margin-top: .4rem;
}
[type=email],
[type=password] {
background: #ffffff;
border: none;
border-radius: .5rem;
}
.separate-content {
position: relative;
top: -2.1rem;
}
.separate-content input {
margin-right: 0.5rem;
font-weight: bolder;
}
form button {
max-width: 100%;
width: 320px;
padding: 1.5rem 0;
border-radius: 1rem;
border: none;
background: #fff;
transition: 2s ease-in;
cursor: pointer;
color: black;
}
form button:hover {
background-color: #7c47c0;
color: #fff;
}
form label {
font-weight: bold;
}
.btncontain {
height: 2rem;
}
<section class="learn">
<div class="bg-color-container dec-adder">
<h1>Sign in with your credentials</h1>
<form action="#" method="post">
<div class="input__data">
<label for="Email">Email Address</label>
<input type="email" name="email" id="Email" autofocus required placeholder="Your Address">
</div>
<div class="input__data">
<label for="lg-password">Enter Passward</label>
<input type="password" name="Security-Passcode" id="lg-password" required>
</div>
<label class="separate-content" for="lg-remember">
<input type="checkbox" name="lg-remember" id="lg-remember" required> Remember Me
</label>
<div class="btncontain"><button type="submit ">Sign Up</button></div>
</form>
</div>
</section>uj5u.com熱心網友回復：
確保在您的媒體查詢中添加較小螢屏的尺寸（max-width: 600px對于小于 600 像素寬度的螢屏），然后為它們提供任何您想要的樣式。我希望這會有所幫助，但如果它不起作用，您可以附加您的 CSS。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527393.html
標籤：htmlcss形式