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>

我在textarea，按钮及其布局方面遇到了问题

1 个答案: