用点或连字符填充标签之间的可用空间

2024-02-20

我有一个带有标签的页面,这些标签包含在 div 中,标签有一个变量,我想用字符、点或“-”填充两者之间的空格。

例如。

我的标签文本 1 ----------- 这里有一些文本。

我的文字2 ---------------------- 另一篇文字。

如果您发现两个文本都是合理的(或者至少我尝试过),则可能是字符计数问题,但字符可以具有不同的宽度,任何人都知道在 Asp.Net、css、jquery 或其他任何内容中以编程方式执行此操作的干净方法?

Update

......................

有人建议在答案中将两个标签与 css 对齐,但我认为中间的字符我也会遇到同样的问题,这当然可以是另一个标签。有什么想法吗?

Update

......................

Patrick 的回答非常接近解决方案,但现在 IE8 中不显示连字符,也许我的评论之一中存在一个未理解的地方,它应该适用于 IE7、IE8 和 Firefox,只有这些浏览器。

谢谢大家。


尝试这个: http://jsfiddle.net/FpRp2/4/ http://jsfiddle.net/FpRp2/4/ (已更新,现在可以在 ie7 中使用)

@Marcel 给出的解决方案是使用虚线边框而不是文本连字符解决了 IE7 的最终问题。

(请注意,到目前为止我只在 Safari、Firefox 和 Chrome 中进行了测试。)

EDIT: IE8 works. Working on a fix for IE7.

.outer {
  display: inline-block;
  *display: inline;
  zoom: 1;
  position: relative;
  clip: auto;
  overflow: hidden;
}

.container {
  position: relative;
  text-align: right;
  white-space: nowrap;
}

.filler {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px dashed #333;
  height: 50%;
}

.label {
  background: white;
  float: left;
  margin-right: 20px;
  padding-right: 4px;
  position: relative;
}

.text {
  background: white;
  padding-left: 4px;
  position: relative;
}
<div class='outer'>
  <div class='container'>
    <div class='filler'></div>
    <span class='label'>some label</span>
    <span class='text'>some text</span>
  </div>
  <br>
  <div class='container'>
    <div class='filler'></div>
    <span class='label'>some other label</span>
    <span class='text'>some other text</span>
  </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

用点或连字符填充标签之间的可用空间 的相关文章

  • 为什么我们使用 SpreadsheetApp.flush()?

    我的理解是 flush https developers google com apps script reference spreadsheet spreadsheet app flush有助于在功能发生时执行这些功能 而无需将它们捆绑在
  • 将异步事件监听器与 Nestjs EventEmitter 模块和无服务器函数结合使用

    我正在尝试在 Nestjs EventEmitter 模块的帮助下实现具有无服务器 lambda 函数的异步工作线程 处理程序在发出事件时被调用 但该函数在 async await 调用之前关闭 我尝试过同时使用emit and emitA
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 窗口大小调整触发的 DOM 事件

    我有一个布局相当复杂的页面 最初打开页面时 某些元素的对齐存在问题 但是 可以通过更改浏览器窗口的大小来 永久 解决此问题 显然 我不希望用户必须调整浏览器窗口的大小才能使页面正确显示 所以我想知道是否有一种方法可以在页面首次加载时以编程方
  • 带有 mkdocs 的本地 mathjax

    我想在无法访问互联网的计算机上使用 MathJax 和 Mkdocs 因此我不能只调用 Mathjax CDN Config mkdocs yml site name My Docs extra javascript javascripts
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • jQuery / Ajax:如何循环遍历数组作为 Ajax 成功函数的一部分

    我有一个阿贾克斯调用返回一个数组并需要对该数组中的每个值执行某些操作 到目前为止 我有以下内容 但这会返回以下错误 Uncaught TypeError Cannot use in operator to search for length
  • Outlook 2013 渲染问题:嵌套表格截断相邻文本

    在开发 html 电子邮件通讯时 我经常使用类似于以下的结构 table width 244 border 0 cellpadding 0 cellspacing 0 tr td table border 0 align left tbod
  • 为什么 Array.prototype.filter() 在 Magnolia JavaScript 模型中抛出错误?

    我正在尝试过滤 FreeMarker 列表Magnolia JavaScript 模型 https documentation magnolia cms com display DOCS61 How to work with JavaScr
  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div
  • JavaScript 中的实时摩尔斯电码转换器

    在看到谷歌关于莫尔斯电码 gmail 的愚人节笑话后 我想我应该尝试用 javascript 创建一个实时莫尔斯电码转换器 我正在使用正则表达式和替换将莫尔斯电码更改为字符 例如 replace g a replace g r 我遇到的问题
  • 不使用控件时,视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时
  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur
  • 在webview android中加载本地html文件

    我正在尝试在 android 的 webview 中加载 html 文件的内容 但是 它给了我 网页不可用错误 如果我尝试使用谷歌或雅虎等网站 它们就会起作用 html文件位于src gt main gt assests gt index
  • 如何:带有 onclick 的 div 位于另一个带有 onclick 的 div 中

    只是一个简单的问题 我遇到了 div 与 onclick javascript 之间的问题 当我点击内部 div 时 它应该只触发它的 onclick javascript 但外部 div 的 javascript 也会被触发 用户如何点击
  • 在方法内部执行方法

    我目前正在 FreeCodeCamp 中进行 JavaScript 练习 我的代码应该使用的测试用例之一是函数调用 如下所示 addTogether 2 3 这是我得到的基本功能 function addTogether return 当我
  • 使用 VBA 通过 Access 导航网页/操作 IE

    你好 StackOverflow 社区 我有一个关于使用 Access VBA 操作 IE 的问题 本质上 我正在尝试编写代码 使用 IE 打开特定网页 在该页面中搜索特定链接 目标链接的名称将取决于用户的情况 通过以编程方式单击该链接导航
  • JQuery 删除和内存泄漏

    我正在开发一个游戏 我看到了很多内存消耗 我使用jquery animate 动画完成后 我 remove 元素 我的问题是 从 dom 树中删除一个元素后 对象还存在记忆中吗 Javascript 是一种垃圾收集语言 这意味着当没有代码保

随机推荐

  • 所有音频频率

    我怎样才能获得 可能吗 所有音频现在都在系统中播放以编写一些声音可视化工具 有没有c 或c 库 提前致谢 基本步骤是 将窗函数应用于样本块 例如 1024 个样本 汉宁窗 对加窗样本执行实数到复数 FFT 取每个 FFT 输出 bin 的幅
  • Chrome 53 在第二页及以后的页面上打印两次表格标题的解决方法?

    我网站的用户需要能够打印包含第一页打印内容和第二页表格的网页 精简版本是 jsFiddle athttps jsfiddle net jaydeedub n3qhvtvx 25 https jsfiddle net jaydeedub n3
  • 根据另一列的排名计算一列的总和

    我有一个数据集 Security market value return Quintile 1 0 07 100 3 2 0 10 88 2 3 0 08 78 1 4 0 12 59 1 5 0 20 106 4 6 0 04 94 3
  • 我可以在运行时指定maven project.artifactId吗?

    我有一个 Maven POM 我想将其用作模板 根据我传递给它的参数生成具有不同名称的工件 但我不知道如何在运行时指定artifactId 如果我参数化
  • 用于 python 3.X 的 OpenCV

    有谁知道我是否可以在 python 3 X 中使用 OpenCV 库 或者我应该坚持使用scikit image用于物体识别之类的任务 我想尝试一下 openCV 但去年决定从 2 7 开始切换 我在这里搜索了数据包 http www lf
  • Java 中的 Windows 7 任务栏进度条

    我想知道是否可以像Windows资源管理器那样在进行文件操作时在任务栏上显示进度条 我看到很多例子 但都是C 的 SWT 不会削减它 我发现这个功能包含在Java 9 它是一部分AWT而且使用起来非常简单 这是一个简短的例子 import
  • 使用 Pandoc 和 Markdown 时出现紧密列表错误

    我在 Mac OS 10 12 上使用 pandoc v 1 18 将此 Markdown 文件转换为 pdf 使用简单的命令行 A list that does not work one two three 我收到此错误 Undefine
  • 使用 R 扩展时 NetLogo BehaviourSpace 崩溃

    我正在我的机器上运行动物饲养场的模型 我已将 R 扩展添加到 NetLogo 代码中 以计算每个家庭范围的最小凸多边形 当我在多个内核上的BehaviorSpace 中运行模型时 NetLogo 将在几个时间步骤后消失 即停止运行 我在 5
  • Visual Studio Code 中 Spring Boot 的热插拔

    我刚刚使用 Angular 4 启动了一个 Spring Boot 项目 对于 Angular 我可以运行npm start以便 NPM 编译每个更改 但我不知道如何为 Spring Boot 做到这一点 我可以找到一些 Eclipse I
  • Woocommerce 添加到购物车按钮重定向到结帐

    我使用插件 woocommerce 创建了一个电子商务 我只出售订阅 因此 cart 页面毫无用处 我正在尝试摆脱它 以便当我的客户单击 添加到购物车 按钮时 他最终会进入结帐页面 在 WooCommerce 3 6 或更高版本中 您可以使
  • 杰青 |更新由`select`选择的数组元素

    在 JSON 数组中 我想根据节点的值选择一个数组元素 然后更新同一数组元素中的不同节点 例如 在下面的 JSON 中 apiVersion vlabs properties orchestratorProfile orchestrator
  • 如何在屏幕旋转后禁用/避免片段自定义动画

    我刚刚发现 每次在片段上 setRetainInstance true 时 它都会按预期工作 保留片段数据 但这会导致片段的自定义动画在屏幕旋转后再次执行 有没有办法避免 禁用屏幕旋转时的这些动画 该片段是使用以下动画创建的 setCust
  • 如何放置我的网页以便我可以在谷歌搜索中找到我的页面? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 如何上传我的网页以便我可以在 Google 搜索中找到我的网页 搜索引擎优化可能是一个耗时的过程 但其中有几个因素 您的网站应该具有良好的关键字丰富的
  • 在Python中将命名列表向量从R翻译成rpy2?

    python 中的 Rpy2 中的以下 R 代码相当于什么 Var1 c navy darkgreen names Var1 c Class1 Class2 ann colors list Var1 Var1 目前尚不清楚是什么ann co
  • php ssh2_exec 不执行“su”命令

    我在 php 的 ssh2 中获得了很多乐趣 我正在通过 ssh ing 进入 localhost 运行 ubuntu 进行测试 我已经成功地使用我的用户名 而不是 root 进行连接和身份验证 并且一些命令 例如 ls 返回一些信息 这是
  • 单击 iAd 时暂停 SpriteKit 场景

    我正在研究一个SpriteKit项目 我正在努力在点击 iAd 时暂停游戏 并在点击 iAd 时取消暂停iAd被解雇 主要问题是从 ViewController 暂停场景 我知道如果我想从 ViewController 暂停场景Scene
  • 使用子进程时如何限制程序的执行时间?

    我想使用子进程来运行程序 并且需要限制执行时间 例如 如果它运行超过2秒我想杀死它 对于普通程序 kill 效果很好 但如果我尝试跑步 usr bin time something kill 并不能真正杀死程序 我下面的代码似乎不能很好地工
  • 谷歌表格。如何获取实际范围大小(以像素为单位)

    我的脚本将选定的范围转换为图像 请参见 https docs google com spreadsheets d 1qNQ6iCMoBCQgJzBB63ymtBQ6BedXZFhjgZZKGItjeVA copy 它首先创建一个公共 PDF
  • 远离 CSS 的抽象

    许多框架试图从 HTML 自定义标签 JSF 组件系统 中抽象出来 以便更轻松地处理特定的问题 你们使用过的东西中是否有类似的 CSS 概念 它可以为你带来很多跨浏览器的魔力 支持类似的变量 为什么我每次想要那种颜色时都必须输入 3c5c8
  • 用点或连字符填充标签之间的可用空间

    我有一个带有标签的页面 这些标签包含在 div 中 标签有一个变量 我想用字符 点或 填充两者之间的空格 例如 我的标签文本 1 这里有一些文本 我的文字2 另一篇文字 如果您发现两个文本都是合理的 或者至少我尝试过 则可能是字符计数问题