2 个单词之间有空格 CSS

2024-05-26

我想在 css 中的 2 个单词之间添加一个空格,例如:

 1 RUNNING DAYS    [email protected] /cdn-cgi/l/email-protection

在 HTML 中有 &nbsp但使用不正确&nbsp我认为?

<div class="bandeau-blanc">
        <div class="sous-titre-bandeau-blanc"><i class="far fa-calendar"></i> 1 RUNNING DAYS &nbsp;&nbsp; <i class="far fa-envelope"></i>[email protected] /cdn-cgi/l/email-protection</div>
    </div>

如何在 CSS 中做到这一点?

.sous-titre-bandeau-blanc{
    font-family: 'Open Sans', sans-serif;
    font-size: 13.3333px;
    color: #474747; 
    padding-top: 14px;
    padding-left: 28px;
    padding-bottom: 15px;

}

谢谢


您可以将文本包装在 p 标记中,并且可以在使其成为内联块后为其添加边距。

或者,您可以将容器设为弹性盒,然后使用justify-content: space-between;但您需要将每个图标及其各自的文本分组到另一个 div 或 span 中。

例如:

<div class="bandeau-blanc">
  <div class="sous-titre-bandeau-blanc">
    <span>
      <i class="far fa-calendar" />
      <p>1 RUNNING DAYS</p>
    </span>
    <span>
      <i class="far fa-envelope" />           
      <p>[email protected] /cdn-cgi/l/email-protection</p>
    </span>
  </div>
</div>
<style>
.sous-titre-bandeau-blanc {
  display: flex;
  justify-content: space-between;
  width: 450px;
}
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

2 个单词之间有空格 CSS 的相关文章

  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red
  • 可以将position:absolute元素设为粘性吗?

    In CSS position sticky使元素能够显示position static行为 即 它采用文档流中的默认位置 直到到达某个滚动位置 然后采用position fixed行为 那么 这是否意味着我们不能使用position st
  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • Webpack 4:如何使用 LESS 获取 CSS 源映射?

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说
  • 如何检测一个或多个 JS/CSS 库加载失败(例如 CDN)?

    Premise 我找到了这两个答案 但我不明白如何将它系统地应用于许多库 检测并记录外部 JavaScript 或 CSS 资源加载失败的情况 https stackoverflow com questions 5683824 detect
  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box
  • Chrome:当父级固定时,无法将一个绝对 div 放置在另一个 div 上

    我发现 当我想要位于顶部的 div 的父级固定时 我无法将一个绝对定位的 div 放置在 Chrome 中的另一个 div 上 div div div div div div 这是演示该问题的 JSFiddle http jsfiddle
  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • sh read 命令会吃掉输入中的反斜杠吗?

    也许最容易用一个例子来解释 echo echo while read in do echo in done 看来read命令将输入 中的反斜杠解释为转义符并删除它们 我需要逐行处理文件而不更改其内容 并且我不知道如何停止在这里智能读取 有任
  • 用户无法安装单击一次应用程序

    我有一个相对简单的支持应用程序 我选择通过单击一次将其部署给我们的支持人员 我认为它仍然被称为 Click Once 我在 VS2008 中使用项目属性的发布选项卡 一些用户已成功点击该网址 下载并运行该应用程序 某一特定用户不能 他安装了
  • 如何使用 Anaconda Python 执行 .py 文件?

    我刚刚在我的 Windows 计算机上下载并安装了 Anaconda 但是 我在使用命令提示符执行 py 文件时遇到问题 如何让我的计算机了解 python exe 应用程序位于 Anaconda 文件夹中 以便它可以执行我的 py 文件
  • Java 8 中函数类型全等 lambda 表达式的用法

    我对 的定义和用法感到困惑 Stream collect Supplier
  • 如何在Python中将字符串转换为包含一个元素的列表[重复]

    这个问题在这里已经有答案了 我有一个字符串 我想将其转换为其中只有一个元素的列表 a abc print list a output a b c Expected o p abc 正确的做法是什么 只需使用 a abc b a print
  • mongodb 通配符匹配特定键的所有值[重复]

    这个问题在这里已经有答案了 我试图弄清楚如何匹配一个键并返回该键的所有值 是否可以将值作为通配符给出 我想在值上使用通配符返回该特定键的所有内容 db collection find key 我还希望这也能返回整个集合 其中的键也与通配符值
  • 为什么PostgresQL查询性能随着时间的推移而下降,但重建索引时又恢复了

    根据这个page http www postgresql org docs current static indexes examine html在手册中 indexes don t need to be maintained 然而 我们运
  • 从数据库结果生成多维数组的递归函数

    我正在编写一个函数 它接受页面 类别数组 来自平面数据库结果 并根据父 ID 生成嵌套页面 类别项目数组 我想递归地执行此操作 以便可以完成任何级别的嵌套 例如 我在一个查询中获取所有页面 这就是数据库表的样子 id parent id t
  • 使用 GSON 将 JSON 字符串转换为 Java 对象

    我正在尝试将 json 解析为 java 根据 jsonlint com 我有以下字符串 该字符串是有效的 json private final static String LOC JSON lat1 39 737567 lat2 32 7
  • 调用本机方法时返回 java.lang.UnsatisfiedLinkError

    我正在尝试为第三方 DLL 制作 Java 包装器 我创建了自己的 DLL 充当 JNI 和第三方 DLL 之间的中间人 在java中我加载这个DLL很好但是错误java lang UnsatisfiedLinkError sixense
  • 修复了 div 背景重叠浏览器滚动条的问题

    我以前从未见过的非常奇怪的行为 我有一个固定位置的 div 它有一个透明的 png 背景图像 z index 设置为 1 以便内容可以使用滚动条在固定图像上滚动 我将其放置在底部和右侧 0px 处 但图像与滚动条重叠 无论如何 在 FF 和
  • 如何使用 Sequel Pro 在导入过程中将字符串更改为日期?

    我正在尝试使用 Sequel Pro 将文件导入到 MySQL 表中 我知道我需要使用 STR TO DATE 但我无法找出正确的语法 我在每一行都收到一堆这样的错误 ERROR in row 1 You have an error in
  • 为什么在 WSO2 中自定义 Axis2 版本?

    好吧 在为 WSO2 ESB 开发自定义传输时 建议我使用特定于 WSO2 的 Axis2 版本 1 6 1 wso2v5 有谁知道这个版本是否与 标准 1 6 1 版本有所不同 而这个 分支 的动机又是什么 AFAIK 这是因为 wso2
  • 如何从 webmethod 向 AJAX 调用返回异常?

    我回来了List
  • 确保 unsigned int/long 始终在 C# 中的检查上下文中执行

    有没有人觉得奇怪 uint 和 ulong 的默认上下文是未检查的 而不是检查的 因为它们旨在表示永远不能为负的值 因此 如果某些代码试图违反该约束 在我看来 自然且首选的行为是抛出异常 而不是返回最大值 这很容易使重要数据处于无效状态并且
  • 如何在Shiny中动态生成的条件面板中格式化条件?

    我正在尝试使用 for 循环在 Shiny 中创建小部件 每个块包含 label 复选框 选择选择器 两个数字输入 我想根据复选框的值和选择选择器的值来设置显示或隐藏两个数字输入的条件 在我创建的 for 循环中 我为每个小部件变量添加了一
  • LINQ 中的延迟执行有什么好处?

    LINQ 使用延迟执行模型 这意味着在调用 Linq 运算符时不会返回结果序列 而是这些运算符返回一个对象 然后仅当我们枚举该对象时 该对象才会生成序列的元素 虽然我了解延迟查询的工作原理 但我在理解延迟执行的好处时遇到了一些困难 1 我读
  • 如何在 YAML 中阻止注释?

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 如何在 YAML 中注释一行行 YAML 支持内联注释 但不支持块注释 From 维基百
  • Haskell 中多核编程的现状如何?

    Haskell 中多核编程的现状如何 现在有哪些项目 工具和库可用 有哪些经验报道 2009年至2012年期间 发生了以下事件 2012 从 2012 年开始 并行 Haskell 状态更新开始出现在并行 Haskell 摘要 http w
  • 2 个单词之间有空格 CSS

    我想在 css 中的 2 个单词之间添加一个空格 例如 1 RUNNING DAYS email protected cdn cgi l email protection 在 HTML 中有 nbsp nbsp但使用不正确 nbsp我认为