时间戳

首页 > 解决方案 > 单一表单元素和响应宽度的初学者元素问题

html - 单一表单元素和响应宽度的初学者元素问题

问题描述

我正在使用网格布局在 Html 和 CSS 中做作业，我知道我的代码很草率，因为我刚刚开始学习。我有两个问题阻止我通过这项任务，它们是：

  1. 当窗口窄于 600 像素时，表单元素与窗口一样宽

我以为我在代码中有宽度，当窗口小于 600 像素时，我的媒体屏幕也会改变表单大小。另外，我只有一个表单元素，但由于某种原因，我在评分时不断收到上述两个错误，有人可以帮助我吗？

我的html和css：

form {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-rows: 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr;
  gap: 1px 1px;
  grid-template-areas: ". ." ". ." ". ." ". ." ". .";
  width: 600px;
}
select {
    width: 200px;
}
.name {
  grid-column: 1 / 1;
}
.type {
  grid-column: 2 / 2;
}
.bio {
  grid-column: 1 / 1;
}
.email {
  grid-column: 2 / 2;
}
.submit {
  grid-column: 1 / 2;
}
.reset {
  grid-column: 3 / 2;
}
@media screen and (max-width: 600px) {
  button,
  input,
  textarea,
  select,
  label {
    display: block;
    margin: 0;
    text-align: left;
    width: 100%;
  }
}

/* card */
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
  transition: 0.3s;
  width: 344px;
}

.card:hover {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
}

.container {
  padding: 16px 16px;
}

div.title {
  font-size: 22px;
  color: #000;
}

div.secondary {
  font-size: 11px;
  color: #232F34;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Assessment</title>
  <link rel="stylesheet" href="site.css">
</head>
<body>
  <!-- Your markup goes here. -->
  <form action="/pets" method="post">
    <fieldset>
      <legend>Add Pet</legend>
      <div class="formgrid">
        <div class="name">
          <label for="name">Name</label>
          <input type="text" id="name" name="pet_name">
        </div>
        <div class="type">
          <label for="type">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="other">Other</option>
            <option value="zebra">Zebra</option>
          </select>
        </div>
        <div class="bio">
          <label for="bio">Biography</label>
          <textarea id="bio" name="pet_bio"></textarea>
        </div>
        <div class="email">
          <label for="owner-email">Owner's Email</label>
          <input type="email" id="owner-email" name="pet_owner_email">
        </div>
        <div class="submit">
          <button type="submit" id="new-pet-submit-button">Create new pet</button>
          <button type="reset">Reset</button>
        </div>
      </div>
    </fieldset>
  </form>
  <!----card---->
  <div class="card">
    <img src="images/desert.jpg" alt="Avatar" height="height:194px" width="344px">
    <div class="container">
      <div class="title">Title goes here</div>
      <div class="secondary">
        <img src="images/person-avatar.jpg" alt="Avatar" class="avatar" style="width:40px">
        Secondary text
        <p>
          Greyhound divisively hello coldly wonderfully marginally far upon excluding.
        </p><br>
      </div>
    </div>
</body>
</html>

标签： htmlcssgrid

解决方案

改变你的宽度：600px；在表单部分到 max-width: 600px;

    form {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-rows: 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr;
  gap: 1px 1px;
  grid-template-areas: ". ." ". ." ". ." ". ." ". .";
  max-width: 600px;
}

这将使它在 600px 以下时响应

推荐阅读