如何在两个 headers 之间画一条理想线？

Question

我的 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>

我想 "draw" 在这两个标题之间划一行，如下所示：

它应该适应标题的宽度：

（请原谅我的图片编辑技术）

有没有简单的 css-only 方法？

Answer 1

我认为最简单和最灵活的方法是使用Flexbox。只需向 h1 和 h2 元素添加一些左右填充，这样行就可以总是比文本长一点。

body {
  text-align: center;
}
.container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
h1 {
  font-size: 20px;
  padding: 0 10px;
}
h2 {
  font-size: 16px;
  padding: 0 10px;
}
.line {
  height: 3px;
  width: 100%;
  background: red;
}

<div class="container">
  <h1>Lorem ispum</h1>
  <span class="line"></span>
  <h2>Sub</h2>
</div>
<hr>
<div class="container">
  <h1>Ispum</h1>
  <span class="line"></span>
  <h2>Lorem ipsum dolor sit amet.</h2>
</div>

更新：您实际上可以在 .container 上使用伪元素执行此操作，但您需要指定顺序，以便该行显示在 h1 元素之后。

body {
  text-align: center;
}
.container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.container > h1 {
  order: 1;
  font-size: 20px;
  padding: 0 10px;
}
.container > h2 {
  padding: 0 10px;
  order: 3;
}
.container:before {
  content: '';
  height: 3px;
  width: 100%;
  background: red;
  order: 2;
}

<div class="container">
  <h1>Lorem ispum</h1>
  <h2>Sub</h2>
</div>
<hr>
<div class="container">
  <h1>Ispum</h1>
  <h2>Lorem ipsum dolor sit amet.</h2>
</div>

Answer 2

试试这个：

#container {
  text-align: center;
}

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

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

Answer 3

你可以用一个简单的 pseudo 元素来处理这个问题。 无html结构改变或不支持css跨浏览器。我们需要在父级上使用 table 显示，并在 <h1>.

上创建一个新元素（您的边框与 pseudo）

看这个例子：

#container {
  display: table;
  margin: 0 auto;
  text-align: center;
}

h1:after {
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 3px solid red;
}

h1, h2 {
  margin: 5px 0;
  padding: 0 10px 5px;
}

h1 {
  position: relative;
  font-size: 20pt;
}

h2 {
  font-size: 16pt;
}

  <div id="container">
    <h1>long long title</h1>
    <h2>Sub</h2>
  </div>

  <div id="container">
    <h1>h1</h1>
    <h2>Sub</h2>
  </div>


 <div id="container">
    <h1>h1</h1>
    <h2>long long subtitle</h2>
  </div>

Fiddle demo

如何在两个 headers 之间画一条理想线？

How do I draw an Ideal line between two headers?

html

css

markup