我试图在中间用一些文字做水平规则.

-----------------------------------我的头衔在这里-----------------------------

在CSS中有什么方法可以做到这一点吗?显然没有所有的"-"破折号.

推荐答案

我大致是这样做的:这条线是通过在h2上设置border-bottom,然后给h2一个较小的line-height来创建的.然后将文本放入一个带有不透明背景的嵌套文件中.

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}
<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

我只在Chrome上测试过,但没有理由不在其他浏览器上运行.

JSFiddle:http://jsfiddle.net/7jGHS/

Html相关问答推荐

如何将 Google Apps 脚本项目中的 CSS 文件应用于 doPost() 返回的 HTML 文件?

CSS - 如何制作带有弯曲边缘的倒置边框底部?

如何将

中的项目与 React 应用程序中的 CSS 对齐?

SCSS 重复规则消除

我可以使用 Markdown 在 hugo 帖子内容中创建带有 'target="_blank"' 的链接吗?

Flexbox 在添加额外的 div 后停止正常工作

为什么 Bootstrap 折叠功能不起作用?

是否可以在半透明背景上制作透明正方形?

由于边框折叠属性,HTML 表格有一条奇怪的粗体水平线

如何使用变换来对齐 HTML 中的图例?

如何使我的标题布局是这样的?

如何在数据表的第一列标题中添加一条垂直线?

在 word-break: break-word 中,我想使用 CSS / JS 将下一行中的第一个单词大写

如何使标题响应?

如何更改“唯一元素”的间距

从传单 map 导入数据作为 R 中的 sf 对象

谷歌 map 显示“仅用于开发目的”

如何在左侧放置 div 滚动条?

用什么代替 ::ng-deep

Favicon Standard - 2022 - svg、ico、png 和尺寸?