Html 如何在两个标题之间画一条理想的线？_Html_Css_Markup

Html 如何在两个标题之间画一条理想的线？

html css

Html 如何在两个标题之间画一条理想的线？,html,css,markup,Html,Css,Markup,我的HTML代码具有以下结构： h1 { text-align: center; font-size: 20pt; padding-bottom: 0; } h2 { text-align: center; font-size: 16pt; } <body> ... <div id="container"> <h1>Title</h1> <h2>Sub</h2> </

我的HTML代码具有以下结构：

h1 {
  text-align: center;
  font-size: 20pt;
  padding-bottom: 0;
}

h2 {
  text-align: center;
  font-size: 16pt;
}

<body>
  ...
  <div id="container">
    <h1>Title</h1>
    <h2>Sub</h2>
  </div>
  ...
</body>

h1{
文本对齐：居中；
字号：20pt；
填充底部：0；
}
氢{
文本对齐：居中；
字号：16pt；
}
...
标题
附属的
...

我想在这两个标题之间画一条线，如下所示：

它应根据标题的宽度进行调整：

（请原谅我的图像编辑技能）

有没有一种简单的css方法可以做到这一点？

我认为最简单、最灵活的方法是使用

Flexbox

。只需在

h1

和

h2

元素中添加一些左右填充，这样行就可以总是比文本长一点

正文{
文本对齐：居中；
}
.集装箱{
显示：内联flex；
弯曲方向：立柱；
对齐项目：居中；
}
h1{
字体大小：20px；
填充：0 10px；
}
氢{
字体大小：16px；
填充：0 10px；
}
.线路{
高度：3倍；
宽度：100%；
背景：红色；
}


奥雷姆
附属的

伊斯普姆
Lorem ipsum dolor sit amet。

试试这个：

#container {
  text-align: center;
}

h1 {
  border-bottom: 2px solid red;
  padding-bottom: 10px;
} 

/* h2 {
  padding-top: 0px;
  margin-top: 0px;
} */

您可以使用一个简单的

伪元素来处理这个问题不更改html结构或不支持跨浏览器的css。
我们需要在父级上使用表
显示，并在
上创建一个新元素（带有伪
的边框）
看看这个例子：

#容器{
显示：表格；
保证金：0自动；
文本对齐：居中；
}
h1：之后{
内容：“；
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
底部边框：3倍纯红；
}
h1，h2{
保证金：5px0；
填充：0 10px 5px；
}
h1{
位置：相对位置；
字号：20pt；
}
氢{
字号：16pt；
}

长标题
附属的
h1
附属的
h1
长字幕
如果不需要，为什么要使用Flex并更改Html？您不需要将span添加到此结构或使用Flex（旧IE版本不支持），如何使此行可打印？当我单击“打印”时，行消失。您是否使用第一个或第二个示例？效果很好-这是更好的，还是公认的答案？Flexbox不支持IE，因此，您的选择。