使用 CSS 分布内联元素

2024-04-21

有没有一种简单的方法可以使用 CSS 在父块容器中分发内联元素?将边距设置为自动不起作用,因为内联元素之间的边距设置为 0,而且我不想弄乱百分比,因为内容是动态的。

特别是,我在段落 (p) 中有几个锚元素 (a),跨越其容器的 80%,我正在寻找一种简单的方法将它们均匀分布在段落内。

编辑(@cletus):该段落不会换行,锚点是该段落中唯一的东西。通过均匀分布,我的意思是左(右)边缘和第一个(最后一个)元素以及元素本身之间的空间是等距的。


不幸的是,这对于 CSS 来说是不可能的。但是,在元素宽度相等的特殊情况下,这个 CSS 黑客 http://css-tricks.com/equidistant-objects-with-css/使这变得相当容易。

由于可变宽度元素之间的间距相等,即使为每个元素的容器指定百分比宽度也是不够的。这仍然会在元素之间创建可变宽度。

在大多数现代浏览器上使用 JavaScript 可能可以做到这一点。这是一个示例页面 http://seas.ucla.edu/~trey/equid.html展示了一个实施不佳的 JavaScript hack,并证明尝试使用文本对齐来解决此问题将无法可靠地工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 CSS 分布内联元素 的相关文章

  • Bootstrap 列中的标题高度相同

    我有这样的 html bootstrap css div class container div class row div class col xs 6 col div class block div class title strong
  • 如何使用 HTML CSS JS 创建滑块/切换来更改屏幕上的字体大小 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 is there any way I can make this gt 所以我想制作一个滑块 切换器 用户可以拖动 滑动它来改变不同的
  • 等宽字体中的字体大小和字符宽度之间有什么依赖关系?

    等宽字体中的字体大小和字符宽度之间有什么依赖关系 在我的网络应用程序中 我使用 courier new 字体 我想知道 字符串的实际长度 以像素为单位 是多少 如果我知道CSS font size属性 它如何帮助我知道字符串的实际长度 谢谢
  • 调整离子卡中的图像大小

    我想显示一组图像 并在下面说明 我选择使用 Ionic 卡 我得到这个结果 第一张图片 虽然我想保留现在的相同布局 并添加描述 这是我的代码
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • 两个 div 之间的匿名空白

    这里是Fiddle http jsfiddle net y6hSV 1 我有两个divs一个用于标题 另一个用于主体 在 的里面div这是标题 我还有另一个div那个 div 是floated left 因为那个floating 两者之间出
  • 使垂直网格线出现在跨区表格单元格的顶部

    我正在开发一个 ASP Net 项目 我有一个
  • 使用 Javascript 动态添加时,SVG 元素无法正确缩放

    我正在尝试使用 Javascript 在 Bootstrap Grid 中添加 SVG 控件 我可以使用 Javascript 添加 SVG 但页面的缩放 调整大小的行为并不像使用静态 HTML 构建的那样 单击 添加页面 按钮时 一组新的
  • 为网格注入浏览器前缀不适用于 Vue

    我已经在这件事上浪费了一个下午的时间了 我被难住了 我发现IE11不支持grid template我需要使用 ms grid columns and ms grid rows相反 我正在尝试生成一些 CSS 并通过 Vue 方法注入它 这适
  • 将无序列表转换为目录

    参考这个小提琴 http jsfiddle net exGnZ http jsfiddle net exGnZ 你好 我正在尝试用无序列表和前导点重现目录 不幸的是 当内容很长时 格式就会崩溃 有谁知道如何让下图中的第二章与点出现在同一行
  • 一行中单独一个元素的选择器? [复制]

    这个问题在这里已经有答案了 我们有带有 2 个子元素的 Flex 容器 当我们调整窗口大小并且其中一个弹性项目换行时 每个元素都位于其自己的行上 有没有像这样的选择器 when alone in row flex parent flex f
  • 如何使用 :nth-child() 选择所有子项中的所有其他

    我正在开发一个评论系统 我需要拥有其他所有孩子 div 甚至是第一个孩子的孩子 用 CSS 选择 例如 假设我有这个标记 为了简单起见 省略了不需要的结束标签 div class comment div class comment div
  • 设置列表中前 10 项的样式

    可以使用像 li nth child 这样的东西来设置列表中前十项的样式吗 ol li item 1 li li item 2 li li item 3 li li item 4 li li item 5 li li item 6 li l
  • Bootstrap 的网格每行列数

    Bootstrap 附带一个 12 列网格系统 必须放置在行内 我的问题是 列数 行数是否必须为 12 或更少 或者我可以有如下所示的布局吗 div class row div class col md 4 div div class co
  • 将多个 CSS 文件连接成一个

    将多个 CSS 文件连接成一个 CSS 文件的最佳方法是什么 我想减少以下 进入 简单地做cat css css gt css 1 3
  • CSS 过滤器在 Firefox 中不起作用

    我正在尝试 CSS 过滤器 但它在我的 Firefox 15 0 浏览器中不起作用 HTML div class google img src https www google com images srpr logo3w png div
  • 文件缓存:查询字符串与上次修改时间?

    我正在研究缓存网站资源的方法 并注意到大多数与我类似的网站都使用查询字符串来覆盖缓存 例如 css style css v 124942823 后来 我注意到每当我保存 style css 文件时 最后修改的标头都会 更新 使得查询字符串变
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • CSS以两种颜色显示一个字符[重复]

    这个问题在这里已经有答案了 css中是否可以用两种颜色制作单个字符 我的意思是例如字符 B 上半部分为红色 下半部分为蓝色 h1 font size 72px background webkit linear gradient red 49
  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl

随机推荐

  • Angular UI Bootstrap 选项卡集 + ng-include

    我在使用 ng include 设置具有动态内容的选项卡集时遇到问题 我尝试使用 ng repeat 失败
  • 如何判断是哪个控件导致ViewState加载失败?

    我的页面面临 Viewstate 加载问题 页面有一个登录工具来登录管理员和非管理员用户 当非管理员用户登录页面并单击启用了自动回发的复选框时 会出现奇怪的行为 错误详情如下 后来我发现 在左侧的导航面板中 承载链接 侧边栏如下图所示 Se
  • NET Remoting 和 MarshalByRefObject 真的死了吗?

    我正在开发一个需要应用程序域内进程间和进程间机器内通信的项目 是的 我知道 NET Remoting 被广泛认为是一种遗留技术 但我面临着两个非常特殊的问题 也许在这些情况下 WCF 并不能完全替代 NET Remoting 1 AppDo
  • XSLT 增强 Hadoop 配置

    什么是可以根据名称添加或替换属性值的 XSLT 版本 1 0 转换 例如 给定以下输入 XML
  • 如何管理共享库中的 spring-cloud bootstrap 属性?

    我正在构建一个库 该库为使用我们的应用程序提供固执己见的配置Spring Cloud Config Eureka设置 这个想法是将此配置作为自定义启动器提供 在各个微服务应用程序中很少或没有与 Spring Cloud 相关的样板 此时 我
  • 续集,关联返回时出现问题

    我目前正在尝试 Sequelize 并有两个对象 一个Person and Position 当获取人员列表时我想得到他们的位置 models var User sequelize define user first name Sequel
  • 为什么 ["A","B","C"].map(String.prototype.toLowerCase.call) 不起作用? [复制]

    这个问题在这里已经有答案了 当然 这会返回您所期望的结果 A B C map function x return x toLowerCase gt a b c 使用 String prototype toLowerCase call 也是如
  • 我如何查看我的应用程序使用了多少超出其虚拟机预算的内存?

    我查看了 DDMS 但没有看到任何内容 谢谢 您应该在 DDMS 的 设备 视图中单击 更新堆 按钮
  • 压缩独特的数据流

    我有大量的整数数组 每个整数都有几千个整数 每个整数通常与前一个整数相同或仅相差一两位 我想将每个阵列缩小到尽可能小 以减少磁盘 IO Zlib 将其缩小到原始大小的 25 左右 这很好 但我不认为它的算法特别适合这个问题 有谁知道对于此类
  • 导航栏中的复选框小部件闪亮

    是否可以在导航栏行中创建复选框小部件 这是一example http www bootply com 103995 我的想法 下面创建一个checkboxInput 但交互性似乎无法正常工作 library shiny ui lt navb
  • 类中的int是存储在栈上还是堆上? [复制]

    这个问题在这里已经有答案了 可能的重复 栈和堆理解问题 https stackoverflow com questions 2559271 stack heap understanding question 有人告诉我使用 var 真的很慢
  • 如何将可观察的响应投射到本地对象

    在当前的 Angular 6 应用程序中 有一个订阅 observable 来自 RESTful 服务的响应 this activatedRoute data subscribe bag gt console log bag this ba
  • Android发送大量短信

    我有一个应用程序 它会向中央服务器发送大量短信 每个用户每天可能会发送约 300 个文本 SMS 消息被用作网络层 因为 SMS 几乎无处不在 而移动互联网却不然 该应用程序旨在供许多移动互联网尚未普及的第三世界国家使用 当我达到 100
  • 最大限度地降低重新分配人员的成本

    我有属于不同类别的个人 他们位于不同的地方 区 这些人口预计将从population值低于 到demand value population and demand by category and zone lt tibble tribble
  • jQuery 选择更改显示/隐藏 div 事件

    我正在尝试创建一个表单 当选择选择元素 parcel 时 它将显示一个 div 但当未选择它时 我想隐藏该 div 这是我目前的标记 到目前为止 这是我的 HTML div class row Type div
  • 从 AOSP 编译电子邮件应用程序

    我想向 AOSP 电子邮件应用程序添加一些不再受支持的功能 所以我克隆了存储库here https github com android platform packages apps email 这是一个 Eclipse 项目 并将其迁移到
  • C++:防止多个函数同时执行

    我问这个问题是因为mutex我发现文档处理单个函数 我认为我的情况很常见 我的问题是以下代码是否不仅会阻止func1 OR func2 并行执行多次 但它是否也会阻止func1 AND func2 同时执行 include
  • 在 UITableView 标头中包含的 UIImageView 上设置accessibilityLabel

    我有一个UITableView我内置的loadView 我在做的事情之一loadView是创建一个UIView充当表头并填充UIImageView进去 图像视图包含作为风格化标题的图像 因此我想为 VoiceOver 用户添加辅助功能标签
  • 不要让 IE 选择并复制使用 jQuery .hide() 隐藏的表行

    我在数据表顶部有一个 jQuery 即时搜索栏 所有符合搜索条件的记录都将可见 row show 其余的都是隐藏的 row hide Problem 搜索后 我使用鼠标从搜索结果中选择 复制行列表并将其粘贴到 Excel 中 隐藏 记录也会
  • 使用 CSS 分布内联元素

    有没有一种简单的方法可以使用 CSS 在父块容器中分发内联元素 将边距设置为自动不起作用 因为内联元素之间的边距设置为 0 而且我不想弄乱百分比 因为内容是动态的 特别是 我在段落 p 中有几个锚元素 a 跨越其容器的 80 我正在寻找一种