- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
JSFIDDLE: https://jsfiddle.net/vezz82tr/
HTML 代码:
<div>
Section 1...
</div>
<hr>
<div>
Section 2...
</div>
CSS 代码:
hr {
border: 0;
border-top: 4px double white;
text-align: center;
}
hr:after {
content: '\2665';
display: inline-block;
position: relative;
top: -12px;
padding: 0 10px;
background: transparent;
color: white;
font-size: 18px;
}
如您所见,hr 中间有一个图标。我想在小时的中间留出一些空间,这样线条就不会在图标上方或下方。有什么建议吗?
最佳答案
你可以用 Flexbox 来做到这一点
.line {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
hr {
border: 0;
border-top: 4px double black;
flex: 1;
z-index: 1;
}
i:after {
font-size: 30px;
color: black;
padding: 20px;
content: '\2665';
display: inline-block;
}
<div class="line">
<hr>
<i class="heart"></i>
<hr>
</div>
关于html - 如何在hr标签中间留出空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34973527/
我正在练习这个https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations时钟教程。代码中的所有内容对我来说都很清楚。接受这个 h
这个问题在这里已经有了答案: What tags in HTML5 are acknowledged of being self-closing? (3 个答案) 关闭 9 年前。 简单的问题。一个
我有无法更改的 HTML 标记。 示例 TEXT 1 some text TEXT 2 some text 我想删除紧跟在另一个 hr 之后且它们之间没有文本的任何 hr。正
替代 CSS3 简单样式的标记,如果这不起作用,则在 hr 样式下面使用子语句或标准 标记的子语句,如下代码所示。 有淡出边缘的简单样式的 CSS3 标签见链接 http://css-tricks.c
我有一个带有各种链接的工具栏,用 分组元素。因为呈现哪些链接取决于用户的权限,所以我们可能会以两个连续的分隔符结束,或者在末尾有一个分隔符。这是我们不想要的。 Link 1 Absent link
-ability (in nouns 构成名词) : ◊ capability 能力 ◊ responsibility 责任 -ibility (in nouns 构成名词) : ◊ ca
我抓取了运行完成时间的数据集,其中包括在一小时内和一小时内完成的运行者。小时内的运行者编码为 M:S,例如48 分 12 秒完赛的选手为 48 分 12 秒。超过一小时的运行者编码为 H:M:S,例如
SAP HR 显然有几个模型来描述职位 (S)、工作 (C)、组织 (O) 和人员 (P) 对象之间的关系,组织管理 (OM) 模块用于维护这些对象。 P(Person)对象通常是持有者(S)。 有
我正在努力实现尽可能接近下图的东西。 我目前使用下面的代码获得以下内容,但似乎无法完全满足我的需要。 当前样式: 我的 CSS: hr:after { background: url('../
我想在 php 的表单内容中添加一条水平线。那可能吗? 我写了下面的代码,但“hr”在我的电子邮件中看起来像这样 PR1:产品1 PR2:product2 PR3:产品3 PR4:产品4 我该怎么办?
我目前正在使用 PHPWord 生成我的文档,但我想在文档中添加一条水平线。就像在 HMTL 中一样。在 Word 中,您可以通过在 Enter 中键入三个下划线来完成此操作,但我想在生成的文档中使用
在我的 fiddle 中,您会看到文本中断,我想添加 在那里并在 CSS 中装饰它,但我不知道如何执行此操作,因为当我这样做时它会破坏我的内联 block ,我想这是因为 是一个 block 元素。对
在我的 fiddle 中,您会看到文本中断,我想放一个 在那里并在 CSS 中对其进行装饰,但我不知道该怎么做,因为当我这样做时它会破坏我的内联 block ,我认为那是因为 是 block 元素。有
这段代码是我做的 {item.awards.map((obj,i) => Name :
我不确定该问题的确切标题是什么,因为我不知道是什么原因造成的,也不知道可能是什么,所以这个问题可能很难回答,但如果有人愿意花时间看看代码,我们将不胜感激。 这是问题:http://imgur.com/
我遇到了一些 的问题我网站上的标签。 reference image 正如您在这个非常简单的 fiddle 中看到的那样 https://jsfiddle.net/bau1hp9L/ 标签并非都以相
这个问题在这里已经有了答案: change the linear value of gradient hr (1 个回答) Using CSS alone, how can you have a B
我有一个 我需要它具有颜色(十六进制值)#ac8900。如果我用老式的方式设计它 它工作正常。但我希望用 CSS 设置所有样式,所以我在我的样式表中尝试了这个: hr{ color: #ac8900
我们有一条 hr 线,它下面有一个奇怪的黑色像素。 截图:http://i52.tinypic.com/2vwxy78.jpg 我们的代码: HTML: CSS: hr { border-b
有没有更简单的方法,无需任何技巧,让它在视觉上看起来像这样(底部边框从每边填充 10 像素),而不必为此创建额外的行? table { width: 100%; border-collapse
我是一名优秀的程序员,十分优秀!