将文本区域包裹在 HTML 元素周围

2024-03-06

有什么方法可以将 textarea HTML 元素包裹在 HTML 元素周围吗?就我而言,我想将文本区域包裹在标签周围。

这就是我试图实现的目标:

Label name: *********
*********************
*********************

其中 * 是文本区域。


你不能使用HTML里面有标签<textarea>但您可以使用绝对定位将标签放置在所需的位置。

然后,您可以使用CSS text-indent财产 (有关 MDN 的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)以偏移文本区域的第一行,以便标签不会与其重叠。

div {
  position: relative;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  width: 115px;
  line-height: 1em;
}

textarea {
  text-indent: 120px;
  margin: 0;
  line-height: 1.2em;
}
<div>
  <label>This is the label :</label>
  <textarea cols="30" rows="10"></textarea>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将文本区域包裹在 HTML 元素周围 的相关文章

  • 处理css浏览器兼容性的正确方法是什么?

    是为每个用户代理使用不同的 CSS 文件更好 还是使用只有某些浏览器才能看到的 CSS Hacks 更好 Neither 最好的方法是编写适用于所有浏览器的代码 而不需要特定于浏览器的代码或 CSS hack 当然 实现起来并不那么容易 这
  • 使用 CSS 在 javaFX 中设置按钮样式

    我在使用 CSS 的 javaFX 中设置按钮样式时遇到问题 我使用 Intellij Idea IDE 我有 CSS css 文件 Button fx padding 8 15 15 15 fx background insets 0 0
  • HTML - 如何在 HTML 页面上创建递增/递减文本框?

    How can i create a increment decrement text box in HTML Page using jquery or Javascript 我还想设置最大值和最小值 我该如何实现这个目标 简单的 HTML
  • RefineryCMS 2.1.0 和 Zurb 4 带有下拉导航的顶部菜单

    我正在尝试使用 Zurb Foundation 来设计使用最新版本的 Refinery 构建的应用程序 我开始遵循本指南 http blog flatironschool com post 54511602806 build a blog
  • 使用 Javascript 更改元素 ID?

    div Content div 我如何使用 Javascript 更改此 div 的 ID 在谷歌搜索的第一个结果中发现了这个 document getElementById originalDivId setAttribute id ne
  • 对翻译进行语义标记

    我正在标记一份历史手稿 该手稿已从德文翻译成英文 在网页上 我将并排提供两种语言 是否有一种可接受的方法来标记这种情况 我正在考虑使用部分标签分割翻译块并为每个翻译块提供一个 lang 属性 然而 从语义上讲 这无法传达一个部分与另一部分大
  • 集成引导模板的 ASP .Net MVC Web 应用程序

    我知道对于这个问题我可能会得到太多的反对票 但我只是找不到解决我的问题的教程 我在 Visual Studio 2013 中创建了一个 ASP Net MVC 项目 新项目 gt ASP NET Web 应用程序 gt MVC 我正在尝试更
  • HTML5 和 XHTML 1.0 过渡?

    Firefox 3 1 和其他浏览器似乎将 部分 支持 HTML 5 它添加了对视频和音频作为标签的支持 但这些是 XHTML 1 0 Transitional 无法识别的新标签 如果我在未来版本的 Firefox 中使用新的 HTML 5
  • 仅适用于 Firefox 的不同字体大小

    我只是为我的网站添加一个帐户标题 仅显示玩家的用户名 我正在使用自定义字体 它在 Chrome 和 IE 上运行良好 但是对于 Firefox 它不显示自定义字体 只显示下一个可用字体 即 Verdana 我不介意 但我的问题是 Verda
  • 如何使用复选框来过滤 Angular 的结果?

    我正在尝试使用复选框应用过滤器 复选框正确显示 div div
  • 在 GWT 中使用 SVG

    我想知道是否可以在面板中包含 SVG 内容 或者在 GWT 中工作的任何内容 能够以编程方式向 SVG 添加更多内容 例如添加圆或曲线 并处理鼠标事件 这会是在 SVG 或 GWT 中 我尝试创建一个 HTML 对象 添加以下内容
  • div 全宽的响应式背景图像

    我正在尝试弄清楚如何在 div 全宽和响应式中制作背景图像 背景图像在页面的宽度上扩展 并且具有响应性 但图像的高度不是其完整高度 似乎它被某种方式切断了 我正在使用引导框架 我尝试这样做的原因是我想在图像上覆盖一些文本 我尝试了很多不同的
  • youtube 将视频嵌入为带有边框半径的 iframe

    我遇到了一个我完全不明白的问题 我有一个带有 YouTube 视频 iframe 的网站 想通过 CSS 来圆化边框 在http www wunschpreisdeal de empfehlung winterreifen profilti
  • 如何在html中创建字体选择栏

    我想创建一个下拉菜单 在其中我们可以看到所有可用的字体 并且可以选择我们选择的任何字体 我还想创建一个字体颜色选择小部件 存在大量的字体样式 我想知道如何获取所有这些字体以及如何创建一个小部件 用户可以使用该小部件选择他选择的颜色 为了创建
  • 为什么 html 中的 AngularJS 错误没有显示在控制台中?

    Here s a fiddle http jsfiddle net 6y7odxmj 3 用于说明 当 ng click 指令 例如 调用未在控制器的 scope 或其父级 上定义的函数时 它会默默地失败 当我尝试调试网页时 这种行为令人抓
  • 如何停止在 div 外部显示图像

    考虑这段代码 div style width 100px height 100px border 1px solid black div img src http rabbitempire org wp content uploads Pe
  • 如何使用 Soundcloud api 将流传输到 html5 音频播放器中?

    我刚刚开始学习 javascript 作为我的第一次尝试 我想创建自定义音频播放器 它使用 soundcloud 的 api 作为音乐源 到目前为止 这就是我的设置
  • 包含括号的变量会导致问题[重复]

    这个问题在这里已经有答案了 简单的事情 当单击按钮并将其写入文本字段时 我读取选择框的值 选择框
  • 延迟 HTML5:无效伪类直到第一个事件发生

    我最近发现 invalid伪类适用于required页面加载后立即生成表单元素 例如 如果您有以下代码
  • 父级 div 未扩展到子级的高度

    正如你将看到的 我有一个div innerPageWrapper 包围包含内容的 div innerPageWrapper在视觉上也确实充当布局中的半透明边框 我的问题是 innerPageWrapper不会扩展以容纳内部的子元素 更不用说

随机推荐

  • pandas 有没有办法将 read_sql() 与 sql 语句一起使用,该语句需要多个变量?

    这是我的代码的一部分 我已经有一个包含值的数据库 并且需要根据该数据帧中的值创建一个新的数据帧 目前这些值只有 12 和 13 存储在header row ids多变的 当我运行脚本时 我收到以下错误消息 pandas io sql Dat
  • 当 Web API 中没有发布数据时,避免使用 null 模型

    这个问题与我想要实现的目标类似 当没有发布的属性与模型匹配时 避免在 ASP Net Web API 中使用 null 模型 https stackoverflow com questions 25160345 avoiding null
  • 每次击键都会调用 api

    我尝试创建这个反应网站 我可以在其中搜索一个地方 我遇到一个问题 因为每当我在搜索框中输入新字母时 就会调用 api 这会使网站非常慢 我不希望它每次击键时都调用 api 我认为这是因为第二个 useEffect 但如果我删除该 useEf
  • 如何更改 LaTeX 中的文档字体?

    如何将整个文档的字体更改为无衬线字体 或其他字体 感谢文森特答案中的链接 我找到了解决方案 renewcommand familydefault sfdefault 这会将默认字体系列更改为无衬线字体
  • 为什么invalidate()之后不调用onDraw?

    我在 stackoverflow 上找到了很多帖子 但仍然无法解决我的问题 这是我的代码片段 public class MyView extends RelativeLayout Button b1 Button b2 Context sC
  • 如何知道用户是否在 Telegram 中看到了我的机器人发送的消息?

    我正在开发一个 Telegram 机器人 我想知道与我的机器人开始私人聊天的用户是否已经看到机器人发送的特定消息 并想知道他什么时候看到的 可以这样做吗 非常感谢 目前这是不可能的
  • 找不到方法:Microsoft.AnalysisServices

    我已经使用 SSIS 包为数据仓库创建了 ETL 设置 一切都工作正常 直到最后一步 即 分析服务处理任务编辑器 每当我添加立方体并按 确定 时 我都会收到以下错误 找不到方法 Void Microsoft AnalysisServices
  • 如何删除 Xcode 9 中标记单词上插入的双引号

    Xcode 9 中的这个新功能seems没问题 但我无法习惯它 而且在大多数情况下 它要求我比旧的本机函数做更多的工作 如何防止 Xcode 引用标记的单词 而不是用单引号替换标记的单词 在这种情况下 当标记单词时Text并击中 我想要的结
  • AppDomain.UnhandledException 未捕获未处理的异常

    我们有一个 NET 3 5 程序集 dll 由 VB6 代理 exe 通过 COM 接口执行 VB6 代码确实调用 Ensure that no system dialog comes up when we GPF PreviousErro
  • JPA 和数据库中的列顺序

    我使用 Eclipselink 作为我的持久性提供程序 有什么方法可以指定列在数据库中出现的顺序吗 数据库中的列顺序与我的实体中的属性顺序不匹配 据我了解按字母顺序排列的休眠顺序列 但我找不到 Eclipselink 的任何规范 Eclip
  • 如何修改 Poly3DCollection 对象的 zdata?

    我当前正在修改 Line2D 对象的 xdata 和 ydata 属性 如下所示 plt setp ph xdata event xdata ydata event ydata thisline figure canvas draw 我想对
  • 何时在 Python 的 AST 中使用 ExtSlice 节点?

    绿树蛇 http greentreesnakes readthedocs org en latest index html gives 一个例子 http greentreesnakes readthedocs org en latest
  • OpenGL 和 WebGL 的 Alpha 渲染差异

    I m rendering the same scene using the same exact C code once to native OpenGL on windows and once using Emscripten to W
  • 用于 JSON 请求的 AlamoFire 异步完成处理程序

    使用 AlamoFire 框架后 我注意到completionHandler 在主线程上运行 我想知道下面的代码是否是在完成处理程序中创建核心数据导入任务的好习惯 Alamofire request GET http myWebSite e
  • 依赖的非类型模板参数和可变参数模板

    我正在尝试扩展提供的可能性std integer sequence http en cppreference com w cpp utility integer sequence一个名为的新类integer range 显然 这在两个边界之
  • 如何使用 RVM 重新编译 ruby​​?

    我使用 RVM 安装了 Ruby 1 9 3 并且运行良好 然后我在 ruby C 源文件中进行了一些更改 我想重新编译并重新安装它 以便可以使用这些更改 我还没有找到任何类型的rvm重新编译然而命令 使用时出现的问题rvm reinsta
  • 如何在 DataGridViewImageColumn 中添加图像?

    我有一块田地DataGridViewImageColumn 对于字段的每一行 根据条件 我添加不同的图像 有人知道我如何在 Windows 窗体中执行此操作吗 if dgvAndon Rows e RowIndex Cells urgenc
  • WordPress 在管理中提供本机日期选择器吗?

    我正在开发一个插件 并在管理中提供一个由用户填写日期的字段 我想知道 WP Admin I 中是否有可用的本机日期选择器 我通常会包含一个小的 jQuery datepicker 脚本来执行此操作 但如果一个已经可用 我会更喜欢它 因为明显
  • 为什么 paramiko 偶尔会引发异常?

    为了方便起见 我编写了一个小包装类来登录远程主机 执行命令 结束检索数据 def MySSHClient def connect self remoteHost remotePort userName password self s par
  • 将文本区域包裹在 HTML 元素周围

    有什么方法可以将 textarea HTML 元素包裹在 HTML 元素周围吗 就我而言 我想将文本区域包裹在标签周围 这就是我试图实现的目标 Label name 其中 是文本区域 你不能使用HTML里面有标签