项目的CSS帮助。页面需要有一个"form"元素,当窗口宽于600px时,该元素为600px;当屏幕宽度小于600px时,该元素为屏幕宽度。
当屏幕超过600px时似乎可以工作,但当屏幕收缩到600px以下时不会停留在屏幕的宽度。
.card {
height: 335px;
width: 344px;
border: lightgrey;
border-style: solid;
margin-left: auto;
margin-right: auto;
font-family: Arial, Helvetica, sans-serif;
transition: box-shadow;
}
.card:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}
.card-body {
padding: 16px;
font-size: 11px;
color: #232f34;
}
.card_image {
width: 100%;
height: 194px;
}
.person {
height: 50px;
border-radius: 40px;
float: left;
margin: 0 1rem;
}
.title {
display: inline;
color: #000;
font-size: 22px;
padding: 16px;
}
.secondary {
color: #232f34;
display: inline;
padding: 16px;
}
.myform {
max-width: 600px;
}
@media screen {
nav {
position: static;
height: auto;
}
}
@media screen and (min-width: 600px) {
form {
display: grid;
grid-template-columns: 600px;
}
}
<form method="post" action="/pets">
<label for="name">Name</label>
<input name="pet_name" id="name" type="text" />
<br>
<label for="type">Type</label>
<select name="pet_type" id="type">
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Hamster">Hamster</option>
<option value="Other">Other</option>
<option value="Zebra">Zebra</option>
</select>
<br>
<label for="bio">Biography</label>
<textarea name="pet_bio" id="bio"></textarea>
<br>
<label for="owner-email">Owner's Email</label>
<input name="pet_owner_email" id="owner-email" type="text" />
<br>
<button class="new-pet-submit-button" type="submit">
Create new pet
</button>
<button class="Reset" type="reset">Reset</button>
<form class='myform'>
My form!
</form>
</form>
<br>
<br>
<div class="card">
<img src="images/desert.jpg" id="desert" class="card_image">
<img src="images/person-avatar.jpg" class="person">
<h1 class="title">Title goes here</h1>
<h3 class="secondary">Secondary text</h3>
<p class="card-body"> Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
2条答案
按热度按时间axzmvihb1#
当窗口宽度大于600px时,要使表单元素的宽度为600px,可以在CSS中使用媒体查询:只有当 windows 宽度大于或等于600px时,此媒体查询才会应用其中的样式。要使窗体元素在窗口宽度小于600px时具有不同的宽度,您可以使用另一个媒体查询:
toiithl62#
您不需要媒体查询,只需使用
max-width
即可。一个一个二个一个一个一个三个一个一个一个一个一个四个一个