项目的CSS帮助,当窗口宽度大于600px时,页面需要具有600px的“form”元素,并且

rlcwz9us  于 2023-01-06  发布在  其他
关注(0)|答案(2)|浏览(164)

项目的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>
axzmvihb

axzmvihb1#

当窗口宽度大于600px时,要使表单元素的宽度为600px,可以在CSS中使用媒体查询:只有当 windows 宽度大于或等于600px时,此媒体查询才会应用其中的样式。要使窗体元素在窗口宽度小于600px时具有不同的宽度,您可以使用另一个媒体查询:

toiithl6

toiithl62#

您不需要媒体查询,只需使用max-width即可。

body {
  margin: 0;
}

.myform {
  border: 1px solid blue;
  margin-inline: auto;
  padding: 1rem;
  
  /* here's where the magic happens */
  max-width: 600px;
}
<form class = 'myform'>
  My form!
</form>
    • 编辑添加**如果屏幕大于600px时的行为是您想要的,则将网格元素设置为最大宽度:600px,并设置网格模板列为1fr,如下所示。我还使左边和右边的边距自动居中的形式旁边您的卡。

一个一个二个一个一个一个三个一个一个一个一个一个四个一个

相关问题