html – 如何绘制两个标题之间的理想线？

发布时间：2020-12-14 18:53:04 所属栏目：资源来源：网络整理

导读：我的 HTML代码有这样的结构： h1 { text-align: center; font-size: 20pt; padding-bottom: 0;}h2 { text-align: center; font-size: 16pt;}body ... div id="container" h1Title/h1 h2Sub/h2 /div .../body 我想“画出”这些标题之间的一行：它应该适应标

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

我想“画出”这些标题之间的一行：

它应该适应标题的宽度：

(请原谅我的图片编辑技巧)

有没有一个简单的仅限css的方式呢？

解决方法

您可以使用简单的伪元素来处理此问题.没有HTML结构更改或不支持跨浏览器的CSS.
我们需要在父项上使用表格显示,并在< h1>上创建一个新的元素(与伪的边框).

看这个例子：

#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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!