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

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(使用前将#替换为@)

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

  • 绝对定位的表头 (th) - 哪个浏览器是错误的?

    这个带有一个绝对定位列的简单表格在 Firefox 和 IE 中的呈现方式与在 Chrome 和其他基于 Webkit 的浏览器 中的呈现方式不同 http jsfiddle net WZ6x8 http jsfiddle net WZ6x
  • 手机上猫头鹰轮播的高度

    我有一个使用 Owl Carousel 覆盖桌面上整个屏幕的图像 当我在手机设备上查看相同的图像时 它仅占用屏幕尺寸的三分之一 我如何调整高度 使其比手机上当前的高度更高 我读过一些帖子 但作为猫头鹰旋转木马的新手 我不确定我是否做错了什么
  • 扩展引导程序预输入的宽度以匹配输入字段

    我知道这个问题之前至少被问过三次 但我看到的答案并不是我想要的 我希望增加 twitter bootstrap 通过其 typeahead 功能生成的自动完成字段的宽度 我一直在读到它延伸到覆盖该字段中的所有文本 也就是说 文本越长 自动完
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • 编辑角度材质的表格单元格填充

    当我使用开发人员工具检查该元素时 它显示零填充 但是当我查看它并将鼠标悬停在它上面时 它非常清楚地在单元格内具有填充 我不知道这是从哪里来的 并且设置td padding 0 important 什么也没做 感知到的填充是由以下原因引起的d
  • HTML代码可以像CSS文件一样附加到HTML页面吗?

    HTML 代码可以像 CSS 文件一样附加到 HTML 页面吗 这样 如果所有页面中都复制了部分 HTML 代码 我可以将其放在一个文件中 然后轻松修改它 谢谢 Ahmed 是的 可以 使用框架 但不推荐 Example 此代码将允许您重用
  • Chrome 中的错误或 CSS 错误? (隐藏可见性的锚点)

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
  • css 字体 twitter 像关闭按钮一样,我错过了什么?

    twitter 有一个关闭按钮 它是单个字符 x 我需要类似的东西 但是在我检查之后 span x span 我按照 firebug 告诉我的那样创建 css 规则 close button font family Tahoma Arial
  • 第一次从按钮提交时,只有单击两次后才会打开模态框

    我有一个模式弹出窗口可以通过单击按钮打开 不幸的是 当第一次在浏览器中提交时 我只能在单击两次后才能看到弹出窗口 但是 一旦弹出窗口打开并关闭 我就可以在下一次尝试中单击一次来打开模式 如果我刷新浏览器也会发生同样的情况 这看起来很奇怪 任
  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img
  • Rails Active Admin css 与 Twitter Bootstrap css 冲突

    我对 Rails 资产管道有点陌生 所以我可能做错了什么 我正在尝试为我的后端使用 Active Admin 为我的前端应用程序使用 twitter bootstrap css 我将 bootstrap css 添加到 应用程序 资产 样式
  • 数据表“footerCallback”函数未在页脚中显示结果

    我尝试获取每列的总和并将结果显示在页脚中 我在用着 页脚回调 https datatables net reference option footerCallbackDatatables提供的功能 但是它在页脚中没有显示任何内容 数据表解释
  • 如何将 HTML 链接放入电子邮件正文中?

    我有一个可以发送邮件的应用程序 用 Java 实现 我想在邮件中放置一个 HTML 链接 但该链接显示为普通字母 而不是 HTML 链接 我怎样才能将 HTML 链接放入字符串中 我需要特殊字符吗 太感谢了 Update 大家好你们好 感谢
  • 大型应用的回流/布局性能

    我正在使用 GWT 构建一个 HTML 应用程序 其性能总体上是正确的 有时 它会加载 DOM 中的许多对象 并且应用程序会变得很慢 我使用 Chrome 开发者工具分析器来查看时间花在哪里 在 Chrome 下 一旦应用程序被编译 即没有
  • 左对齐图像和居中文本在 div 内的同一级别?

    HTML br div class UpperTitle img src align left CableSolve Web Dashboard Version 0 1 1 div br CSS UpperTitle text align
  • MVC4 捆绑:由于 css3 功能而缩小失败?

    我想使用 MVC4 捆绑和缩小 但我总是在未缩小的 css 文件中收到此错误消息作为注释 Minification failed Returning unminified contents 534 29 run time error CSS
  • 简单的颜色变化

    我正在创建一个用户界面 用户可以在其中更改页面的颜色值 我想要的是获取分配给其背景颜色的值并将其变亮一定程度 我只是想获得一条亮点线 而不必每次都制作新图像 示例 用户将背景颜色设置为 ECECEC 现在我希望某个元素边框变成 F4F4F4
  • 如何仅突出显示嵌套表的最里面的表行?

    我有几个嵌套表 我想突出显示鼠标指针下方的最里面的行 我怎样才能做到这一点 一些提示 我使用嵌套表来显示递归表格数据 表可以嵌套 10 层 嵌套正如您所期望的那样 table tr td table tr td table tr td 可能
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲
  • IE9-11 检测变换样式:preserve-3d

    我为一个项目制作了一个 3d 类型的菜单 自然 IE 会引起问题 因为 IE10 即使 3d 变换工作 也不支持变换样式 preserve 3d 我尝试了解决方法 通过对 3d 菜单容器的每个子元素应用变换 但至少可以说 动画看起来很糟糕

随机推荐

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

    我正在尝试将命令发送到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