html - 我在文本区域、按钮及其布局方面遇到问题

Question

我为 FCC 完成了制作调查表的任务。页面末尾的标签在小于 680px 时不会随着整个页面展开；当应用相同的@media 时也会向右移动。

我试过将“显示”选项更改为“阻止”以使按钮从新行开始，但它不起作用

  border-radius: 5px;
  resize: both;
  border-color: black;
  width: 100%;
  resize: vertical;
}

#submit {
  display: inline-block;
  background-color: purple;
  border-radius: 5px;
  color: white;
  font-size: 1em;
  height: 40px;
  width: 96px;
  border: 0px solid;
  margin: 10px;
}

如果您需要更多信息，这里是完整代码的链接:

https://codepen.io/vadimketov1/pen/BXZXxb

我希望 textarea 能够正确地垂直扩展，整个页面和按钮都在中间，所以它不会正确显示

Answer 1

在媒体查询中添加类 width: 100%;

@media only screen and (max-width: 680px) {
  .textarea{
     width: 100%;
  }
}

然后在你的 html 中在这里添加类

<div class="right textarea">
    <textarea name="comment" rows="4" placeholder="Enter your comment here">           
    </textarea>
</div>