html - 无法更改文本区域的宽度
问题描述
我无法使用 html 行和列更改 textarea 的宽度,也无法使用 css 宽度更改它。我已经用html改变了高度。
我将如何更改宽度?
form,
label {
position: relative;
width: 310px;
margin-left: 65px;
}
input,
textarea {
border-radius: 4px;
line-height: 30px;
flex: 0 0 200px;
margin-left: 10px;
height: 35px;
}
label,
input,
textarea {
display: block;
margin-top: 20px;
margin-right: -300px;
}
form {
margin-top: 100px;
margin-left: 580px;
display: block;
margin-top: 20px;
}
<div class="text-area"><label class="l-message">Message * <textarea name="message" type="textarea" class="message" style="height: 105px;" required></textarea></label></div>
解决方案
有几种方法可以更改宽度。您可以内联或在 CSS 中执行此操作。CSS 是推荐的方法。请看下面的片段
form, label {
position: relative;
width: 310px;
margin-left: 65px;
}
input, textarea {
border-radius: 4px;
line-height: 30px;
flex: 0 0 200px;
margin-left: 10px;
height: 35px;
width: 100%; /* or whatever width you want to set */
}
.form-area {
background-color: #FAFAFA;
padding: 0px 0px 40px;
margin: 30px 265px 0px;
border: 1px solid GREY;
border-radius: 6px;
width: 710px;
height: 360px;
}
label, input, textarea {
display: block;
margin-top: 20px;
margin-right: -300px;
}
form {
margin-top: 100px;
margin-left: 580px;
display: block;
margin-top: 20px;
}
<div class="text-area"><label class="l-message">Message * <textarea name="message" type="textarea" class="message" style="height: 105px;" required></textarea></label></div>
推荐阅读
- html - 字体真棒(快捷方式)?
- javascript - 通过向 Cognito 发送验证码,直接从您的应用程序获取 cognito 电子邮件验证
- python - 如何在 CSV 文件的特定单元格中写入内容?
- github-actions - github 操作在工作流之间共享值
- pandas - 如何在 Pandas 中更新文件
- react-router - 类型上不存在属性“组件”
- c++ - 将带有两个变量的 for 循环分成两个单独的 for 循环(在 C++ 中)
- javascript - 遍历 Googlesheet 并获取与用户列中特定条件匹配的所有行
- r - 如何调整订单输出表
- javascript - 根据 api 重新绘制多行