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>

我想＆＃34;画＆＃34;这两个标题之间的界限如下：

它应该调整到标题的宽度：

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

是否有一种简单的css方法可以这样做？

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

您可以使用简单的pseudo元素处理此问题。 没有html结构更改或非支持css of cross browers 。我们需要在父级上使用table显示，并在pseudo上创建一个新元素（您的<h1>边框）。

请看这个例子：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

<强> Fiddle demo

Answer 3

试试这个：

#container {
  text-align: center;
}

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

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

如何在两个标题之间绘制理想线？

3 个答案: