<!DOCTYPE html> <html> <head> <title><CS></title> </head> <body> <h3>Please enter your question.</h3> <form action="/middle" method="post"> <textarea name="text" rows="4" cols="50"></textarea> <br> <input type="submit" value="确定"> <br> </form> </body> </html> 改为居中自适应
时间: 2023-08-14 11:53:50 浏览: 138
您可以将以下 CSS 样式添加到 `<head>` 标签中的 `<style>` 标签中,以使表单居中和自适应屏幕大小:
```html
<!DOCTYPE html>
<html>
<head>
<title><CS></title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
textarea {
width: 100%;
}
</style>
</head>
<body>
<h3>Please enter your question.</h3>
<form action="/middle" method="post">
<textarea name="text" rows="4" cols="50"></textarea>
<br>
<input type="submit" value="确定">
<br>
</form>
</body>
</html>
```
这样,表单将垂直居中显示,并且文本区域的宽度将适应屏幕大小。
阅读全文