css - 为什么文本出现在行上
问题描述
为什么文本出现在我试图为这样的内容制作白色背景的行上?我想要这样的解决方案 https://ibb.co/tXn4tHf
但这是问题所在: https ://ibb.co/Q8jtZwk
我想要解决这个问题
.section-title {
color: #aaa;
font-size: 15px;
font-weight: 600;
margin: 30px 0;
overflow: hidden;
position: relative;
text-align: center;
text-transform: uppercase;
width: 100%
}
.section-title:after,
.section-title:before {
background-color: #aaa;
content: '';
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%
}
.section-title:before {
left: .5em;
margin-right: -50%
}
.section-title:after {
right: .5em;
margin-left: -50%
}
<h4 class="section-title">جميع قوائمك</h4>
解决方案
或者您可以在文本中添加跨度。然后更改您的 css 样式MORE SIMPLIER。
.section-title {
width: 100%;
text-align: center;
border-bottom: 1px solid #aaa;
line-height: 0.1em;
margin: 10px 0 20px;
}
.section-title span {
background:#fff;
padding:0 10px;
color: #aaa;
}
<h4 class="section-title"><span>جميع قوائمك</span></h4>
推荐阅读
- java - 在哪种情况下 obj != null 在 Java 中抛出 java.lang.NullPointerException?
- php - CodeIgniter - 重定向到其他控制器时会话不起作用
- java - 如何计算特定字符串出现的次数
- firefox - 如何隐藏“不推荐使用 mozImageSmoothingEnabled”。Firefox 中的通知?
- docker - Docker 存储库不存在
- python - 使用 Python 代码执行 Google 搜索列表
- scala - Scala 无法在 Reader monad 实现中推断参数类型
- html - 带有 csl 的 bookdown::tufte_html_book 无法将引文放在边距中
- android - Flutter 返回 `lifecycle-common-java8.jar (androidx.lifecycle:lifecycle-common-java8:2.0.0)` 错误
- django - Django ManytoManyField 的限制选项