需要更正，但我不明白如何执行上述指示

Question

这些就是我错过的问题。

• 有一个'form'元素，当窗口宽度大于600px时，该元素的宽度为600px

• 只有一个名称为'pet_name'的输入和一个与内容' name'相关联的标签

• 只有一个名称为'pet_type'的'select'元素和一个与内容'Type'相关联的标签

这就是我所尝试的HTML

<div>
<label for="Name">pet_name</label>
<input type="text" id="name" name="pet_name">
</div>
<div>
<label for="Type">pet_type</label>
<select id="type" name="pet_type">
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Hamster">Hamster</option>
<option value="Zebra">Zebra</option>
<option value="Other">Other</option>
</select>
</div>
<div>
<label for="bio">Biography</label>
<textarea id="bio" name="pet_bio"></textarea>
</div>
<div>
<label for="email">Owner's Email</label>
<input type="email" id="owner-email" name="pet_owner_email">
</div>
<div>
<button type="submit">Create new pet</button>
<id="new-pet-submit-button"</id>
</div>
<div>
<button type="reset">Reset</button>
</div>

CSS

@media screen and (max-width: 650px) {

form {
width: auto;
}
label {
display: block;
margin: 0;
text-align: left;
width: auto;
}
input,
select,
textarea {
width: 100%;
}

我理解第二部分(我认为)我需要删除name="pet_name"另外两个我有点犹豫。如有任何帮助，不胜感激。

Answer 1

您可以使用min-width: 600px进行表单媒体查询。其他建议是关于for属性

的大小写敏感性

@media screen and (min-width: 600px) {
form {
width: 600px;
}
}
@media screen and (max-width: 650px) {
form {
width: auto;
max-width: 600px;
}
label {
display: block;
margin: 0;
text-align: left;
width: auto;
}
input,
select,
textarea {
width: 100%;
}
}

<div>
<label for="name">pet_name</label>
<input type="text" id="name" name="pet_name">
</div>
<div>
<label for="type">pet_type</label>
<select id="type" name="pet_type">
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Hamster">Hamster</option>
<option value="Zebra">Zebra</option>
<option value="Other">Other</option>
</select>
</div>
<div>
<label for="bio">Biography</label>
<textarea id="bio" name="pet_bio"></textarea>
</div>
<div>
<label for="email">Owner's Email</label>
<input type="email" id="owner-email" name="pet_owner_email">
</div>
<div>
<button type="submit">Create new pet</button>
<id="new-pet-submit-button" </id>
</div>
<div>
<button type="reset">Reset</button>
</div>