如何在图标后对齐多行文本

2024-03-14

在带有缩进(树数据)的表格中,我需要将第二行与第一行对齐。

请注意,文本“Tail”与“Long”不对齐

在这里创建了一个类似的例子

div{
  width:400px;
}
<div>
  <a href="">ICon:</a>
  <span>This is my fight song. Take back my life song. Prove I'm alright song. My power's turned on
Starting right now I'll be strong</span>    
</div>

你可以这样做display: table; and display: table-cell;

div{
  width:400px;
  border: 1px solid black;
  display: table;
  padding: 10px;
}

a, span {
  display: table-cell;
  vertical-align: top;
}
<div>
  <a href="">ICon:</a>
  <span>This is my fight song. Take back my life song. Prove I'm alright song. My power's turned on
Starting right now I'll be strong</span>    
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在图标后对齐多行文本 的相关文章

  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript
  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http
  • 如何使自定义 Web 组件可聚焦?

    我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的 我如何告诉浏览器这个自定义组件应该获得焦点 我希望我的自定义元素 可以聚焦 通过选项卡导航 集中注意力时可以接收按键信
  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga
  • 将 XSL-FO 转换为 HTML

    我有一组用于 PDF 生成的 XSL FO 文档 我还需要将相同的输出数据 PDF 格式 导出为 HTML 文件 此外 我需要 HTML 具有与 PDF 类似的样式 有没有办法使用 C 将 XSL FO 转换为 XHTML NOTE 我知道
  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv
  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 如何使用 Scrapy 从网站获取所有纯文本?

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 如何停止TinyMCE删除span标签?

    在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style

随机推荐

  • 低级控制台输入和重定向

    我正在尝试将命令发送到a的输入cmd exe使用低级读 写控制台功能的应用程序 我使用以下命令阅读文本 抓取 没有任何问题ReadConsole and WriteConsole 连接到进程控制台后的功能 但我还没有弄清楚如何编写 dir
  • java google Drive api V3 分段和可断点上传

    我需要帮助编写大文件 gt 5MB 的分段和可恢复上传 到目前为止 我只能启动分段上传 但我不知道当用户暂停或网络故障时如何恢复它 我所说的 恢复 是指我不知道如何 1 获取已上传到驱动器的总字节数 2 如何在 Content Range
  • Chrome 和 Firefox 中的 CSS 网格行为不同[重复]

    这个问题在这里已经有答案了 我有一个 2 列 3 行的 CSS 网格 由于有角度的 ngif 子句 第三行内容并不总是存在 图像出现在跨越 3 行的第一列中 话虽如此 我在 Chrome 80 0 3987 87 这是我发布的最新稳定版本
  • 设置 DataGridView 单元格值并添加新行

    我有一个包含两列的 DataGridView 单击第一列中的单元格时 会显示一个 OpenFileDialog 当我选择一个文件时 第二列中的单元格值将设置为所选文件名 这是代码 private void dataGridView1 Cel
  • 如何实现 MVC 4 Web App 服务器端互斥体

    我不是 MVC 专家 但我相当确定这是可以实现的 但是 我不知道如何在 MVC 4 中做到这一点 为了进行测试 我使用了使用 VS 2012 创建网站时提供的默认 Web 应用程序 为简单起见 请考虑多个用户 例如 3 在同一时间点击 Ho
  • 如何使用 Azure CLI 按对象 ID 获取 Azure AD 对象

    在 Azure 门户中 可以根据对象 ID 查找 Azure AD 对象 如下所示 是否可以使用 Azure CLI 通过对象 ID 检索 Azure AD 对象 为了使用Azure CLI获取与对象ID相关的对象 看来我需要提前知道相关资
  • MVC 我的网址正在创建“?Length=4”

    我正在创建一个 MVC4 应用程序 我有一个小问题 我的代码是 li Html ActionLink Contract Contract Home new id lnk contract li 我正在获取网址 http localhost
  • Access SQL 查询:获取按日期查找的上一条记录的特定字段

    我对 Access 数据库非常陌生 我正在尝试为拥有多个加油站的天然气分销公司创建库存数据库 每个站都有更多产品 气体类型的库存 加油站报告其库存 包括 交易日期 售出加仑数 加仑交付 实际加仑库存 预订库存 ActualGallonsIn
  • 如何配置构建类型与产品风格?

    基于这个答案https stackoverflow com a 27908019 5156317 https stackoverflow com a 27908019 5156317我有一个后续问题 是什么让代表产品风味的应用程序与众不同
  • 我想用 C# 在堆栈上分配一个对象

    假设我有这个 C 类 public class HttpContextEx public HttpContext context null public HttpRequest req null public HttpResponse re
  • doesNotExist at /en-us/ 模板标记无法找到带有查找参数 `{'reverse_id': u'home', 'site': 1} ` 的页面

    我目前正在查看 django cms demo 我一直在使用这里找到的代码 https github com andrewschoen django cms demo tree master demo https github com an
  • Oracle 中的视图是什么?

    Oracle 中的视图是什么 A 在 Oracle 中查看在其他数据库系统中 它只是存储在内存中的 SQL 语句的表示形式 以便可以轻松地重复使用 例如 如果我们经常发出以下查询 SELECT customerid customername
  • Google App Engine TextProperty 和 UTF-8:何时编码/解码

    我使用的是带有 Django 模板和 Webapp 框架的 Google App Engine 2 5 db TextProperty UTF 8 Unicode 和解码 编码让我很困惑 我非常感谢一些专家可以提供一些建议 我用谷歌搜索了一
  • NvAPI NVAPI_INTERFACE 缺少显式类型

    我是 c cli 新手 想为 nvapi 编写一个小型托管包装器 现在 当尝试访问某些功能时 例如 NvAPI Initialize Visual Studio 告诉我该函数未定义 include nvapi h NvAPIStatus N
  • 是否可以使用 popcorn JS 导出带有视频叠加评论的视频?

    我正在使用 porpcorn JS 在视频上添加注释 我在视频上创建了叠加层 并且所有注释都在视频上呈现 有什么方法可以导出嵌入 html 内容的视频吗 mp4 文件 那么我可以在任何本机播放器 例如 VLC 中播放该视频吗 你最擅长处理它
  • c++ - 抽象类的迭代器

    我有一个抽象类 例如代表几何形状的类 我将有继承自的具体类Shape 例如矩形和三角形 我想迭代形状组成的点 另一个类 所以Shape必须为其提供一个接口 迭代应该是这样的 for Point p shapeObject some code
  • 访问类库中的 Mustoverride 属性时出现 AccessViolationException

    这有点复杂 但我会尽力解释清楚 我有一个通用代码组件的类库 我尝试做一些常见的ConfigurationHandler基类 以简化创建自定义配置部分 集合和元素 我最终得到的是 The ConfigurationSectionBase类是通
  • Ansible 截断连接字符串

    我正在 Ansible 中生成一个 yaml 模板 并尝试截断两个连接的字符串 这里以下代码不起作用 因为连接没有正确地通过管道传输到 regex replace 中 我只想要前 n 个字符 本例中为前 10 个字符 通常我可以将这两个组合
  • XPages - onkeypress 事件未正确触发点击

    我使用 Xpages 自定义控件创建了一个搜索字段 id searchField 和一个搜索按钮 id searchButton 我在搜索字段上添加了一个 onkeypress 事件 这样它将触发对 searchButton 的单击 然后
  • 如何在图标后对齐多行文本

    在带有缩进 树数据 的表格中 我需要将第二行与第一行对齐 请注意 文本 Tail 与 Long 不对齐 在这里创建了一个类似的例子 div width 400px div a href ICon a span This is my figh