javascript - 调整页面大小时，如何使我的表单项响应并对齐？

Question

所以我有一个表单，我对它的大部分内容都很满意，但是当页面调整大小时，外观/功能就会消失......我如何制作它以便表单元素对齐 1在 100% 的情况下仍然保持相同(或相似)的外观？

此外，如果您注意到，流派下拉菜单比其他菜单略短......有什么办法可以解决这个问题吗？

HTML:

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0;
  font-family: 'Raleway', georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

.newFilm {
  text-align: left;
  display: inline-block;
  background-color: #ff6699;
  width: 80%;
  padding: 20px;
}

label {
  font-size: 1em;
  padding: 6px;
  color: #fff;
  font-weight: 700;
  display: block;
  text-align: left;
}

.form {
  margin: auto;
  display: flex;
  text-align: center;
  flex-direction: column;
}

h2 {
  font-weight: 700;
  font-size: 2em;
  padding: 10px;
  border-radius: 20px;
  text-align: center;
  width: 25%;
  background-color: #e0e0e0;
}

#formTitle {
  margin-top: 0;
  margin-bottom: 0;
}

.row {
  margin-left: -20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.col {
  padding: 20px;
}

input,
textarea,
select {
  width: 100%;
  display: block;
  border-radius: 25px;
  background-color: #e0e0e0;
  padding: 10px;
  border: none;
}

input::placeholder {
  color: #000;
}

textarea::placeholder {
  color: #000;
}

#modifyFilmButton {
  float: right;
}

<div class="newFilm">
  <h2 id='formTitle'>Create new review</h2>
  <div class="form">
    <form>
      <div class="row">
        <div class="col">
          <label for="title">Title:</label><input type="text" id="title" placeholder="Title of the film (and year)">
          <label for="image">Image:</label><input type="text" id="image" placeholder="URL to artwork for the film">
          <label for="trailer">Trailer:</label><input type="text" id="trailer" placeholder="URL to trailer for the film">
          <label for="rating">Rating:</label><input type="number" id="rating" min="1" max="10" placeholder="How do you rate this film out of 10?">
        </div>
        <div class="col">
          <label for="genre">Genre:</label>
          <select id="genre">
            <option value="" disabled selected>What genre does the film fit into?</option>
            <option value="action">Action</option>
            <option value="comedy">Comedy</option>
            <option value="horror">Horror</option>
            <option value="other">Other</option>
          </select>
          <label for="synopsis">Synopsis:</label>
          <textarea rows="9" id="synopsis" placeholder="What is the story behind the film? (Spoiler alert!)"></textarea>
        </div>
      </div>
      <input type="hidden" id="id">
      <button id="modifyFilmButton">Post review!</button>
    </form>
  </div>
</div>

Answer 1

您可以使用媒体查询来解决您的问题。

只需将此添加到您的 CSS 中:

@media only screen and (max-width: 700px) {
  .row{
    grid-template-columns:1fr;
  }
}

like this