使用 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 分布内联元素 的相关文章

  • 如何获得 calc() 函数的无单位结果

    我正在使用此计算来获取网页中的流体行高 line height calc 1 42em 1 55 1 42 100vw 300px 1080 300 数学是工作属性 除非我改变font size特定部分 因为line height应使用无单
  • 鼠标悬停时放大图像而不使用 Jquery 推送其他图像?

    当您将鼠标悬停在图像缩略图上 例如 Google 图片正在使用的缩略图 时 我正在尝试创建图像放大效果 但是 我遇到了一个问题 即放大的图像根据放大的图像的位置不断将另一张图像推到另一个位置 这是我到目前为止所拥有的
  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴
  • 如何向 Rails 应用程序添加自定义字体?

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • @font-face 和 font-variant 是个坏主意吗?

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis
  • Bootstrap 中的旋转字形 / Font Awesome

    我试图让引导站点中的字形在悬停时旋转 除了更改颜色之外 这是我的尝试 http jsfiddle net young greedo17 88g5P http jsfiddle net young greedo17 88g5P 使用此代码 d
  • 使用绝对定位时文本被破坏

    我有一个小挑战 我在 Stack Overflow 上没有找到任何解决方案 这就是我得到的 这就是我想要的 为了产生这个标题效果 我使用绝对位置 我什至不知道我的标题的宽度和高度 因此 使用此解决方案时 大文本会中断 My HTML div
  • 滚动时将菜单栏固定在顶部[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我见过一些网站 当用户向下滚动页面时 会在右侧或左侧弹出一个框 另外 注意到这个模板 http www mvpthemes com m
  • Internet Explorer 中的锯齿状按钮边缘

    如何去除 Internet Explorer 中宽按钮的锯齿状边缘 例如 您还可以通过设置来消除 Windows XP 的按钮样式 以及 Windows 的所有其他版本 background color and or border colo
  • 样式 ::-webkit-scrollbar-track 不起作用

    我正在尝试设置滚动条轨道的样式 每当我设计曲目时 div webkit scrollbar track background color blue 没有什么变化 每当我设置滚动条样式时 div webkit scrollbar backgr
  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • CSS 网格框架中的间距有什么作用?

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 适用于移动设备的响应式订单确认电子邮件?

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理
  • 如何简化这个 LESS CSS Box-shadow mixin? (带有“方向”的多个阴影)

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir

随机推荐

  • 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 我正在寻找一种