Question

我今天大部分时间都在休假，试图弄清楚为什么这个h2标签与下面的文字重叠？

以下是我正在使用的相同方案：code pen

＆＃13;

body {
  max-width: 600px;
  margin: auto;
}

.sections-entry-title h2 {
    border: 3px solid;
    border-radius: 50px;
    color: white;
    display: inline-block;
    padding: 20px 10px;
    background: #DD3333;
}

*, *:before, *:after {
    box-sizing: border-box;
}

.sections-entry-title {
    text-align: center;
    margin: auto;
    border-bottom: 3px solid #bb3333;
    height: 64px;
}
div {
    display: block;
}


.width-80 {
    width: 100%;
    margin: auto;
    max-width: 900px;
    padding: 80px 10px 60px 10px;
}

＆＃13;

<body>

<div class="sections-entry-title"><h2>This is a very long title this is a very long title this is a very ling title again very very long even longer than you thought actually super long long title that it doesnt make sense</h2></div>

<div class="width-80">
text text text texttettext text text text textext text text textext text text text textt textxt text text text text text.<p></p>
<p><b>Choose an option to get started</b></p>

</div>  
  
</body>

＆＃13;

无论我做什么，我都无法让h2标签占据自己的空间，而不是重叠在它下面的文字上。

更新：我将下面的类设置为64px的原因是因为我想在h2标签后面创建一个水平。

.sections-entry-title {
   height: 64px;
}

由于

Answer 1

.sections-entry-title的静态高度为64px，请将其移除并显示正常：

＆＃13;

body {
  max-width: 600px;
  margin: auto;
}

.sections-entry-title h2 {
    border: 3px solid;
    border-radius: 50px;
    color: white;
    display: inline-block;
    padding: 20px 10px;
    background: #DD3333;
}

*, *:before, *:after {
    box-sizing: border-box;
}

.sections-entry-title {
    text-align: center;
    margin: auto;
    border-bottom: 3px solid #bb3333;
}
div {
    display: block;
}


.width-80 {
    width: 100%;
    margin: auto;
    max-width: 900px;
    padding: 80px 10px 60px 10px;
}

＆＃13;

<div class="sections-entry-title"><h2>This is a very long title this is a very long title this is a very ling title again very very long even longer than you thought actually super long long title that it doesnt make sense</h2></div>

<div class="width-80">
text text text texttettext text text text textext text text textext text text text textt textxt text text text text text.<p></p>
<p><b>Choose an option to get started</b></p>

</div>

＆＃13;

编辑：更新后还在.sections-entry-title：

的背景中包含了该栏

＆＃13;

body {
  max-width: 600px;
  margin: auto;
}

.sections-entry-title h2 {
    border: 3px solid;
    border-radius: 50px;
    color: white;
    display: inline-block;
    padding: 20px 10px;
    background: #DD3333;
}

*, *:before, *:after {
    box-sizing: border-box;
}

.sections-entry-title {
    text-align: center;
    margin: auto;
    border-bottom: 3px solid #bb3333;
    position: relative;
}
.sections-entry-title:after {
  position: absolute;
  display: block;
  height: 10px;
  background-color: #000;
  content: " ";
  top: 64px;
  z-index: -1;
  left: -40px;
  right: -40px;
}
div {
    display: block;
}


.width-80 {
    width: 100%;
    margin: auto;
    max-width: 900px;
    padding: 80px 10px 60px 10px;
}

＆＃13;

<div class="sections-entry-title"><h2>This is a very long title this is a very long title this is a very ling title again very very long even longer than you thought actually super long long title that it doesnt make sense</h2></div>

<div class="width-80">
text text text texttettext text text text textext text text textext text text text textt textxt text text text text text.<p></p>
<p><b>Choose an option to get started</b></p>

</div>

＆＃13;

Answer 2

您已将section-entry-title设置为64px的高度。删除它（或将其设置为auto），它将正常工作。

Codepen

.sections-entry-title {
    height: 64px; <------ remove or set 'auto'
}

更新了行为

以下内容将添加一个垂直对齐的水平标尺，该标尺穿过h2标记，如评论中所述。

Codepen

为此，您可以使用css :before和:after选择器分别在h2的左侧和右侧划一条线。

.sections-entry-title h2:before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: #bb3333;
  width: 100%;
}

.sections-entry-title h2:after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: #bb3333;
  width: 100%;
}

然后，只需将h2设置为相对于position: relative。

Answer 3

它的父.sections-entry-title的高度为64px，这可以防止文档流为h2元素提供所需的空间。

.sections-entry-title {
  height: auto;
}

Answer 4

增加或删除.sections-entry-title div的高度样式。

您设置了height: 64px样式。

默认情况下，所有元素都有overflow: visible样式，导致重叠。

Answer 5

从类名.sections-entry-title中删除高度，否则将高度设为auto。因为你指定的高度小于你拥有的内容。

Answer 6

事实证明，我需要做的就是将z-index值-1添加到.sections-entry-title h2，然后使用pseudo：before创建h2标签后面的水平线。

以下是代码：

.sections-entry-title h2 {
   border: 3px solid;
   border-radius: 50px;
   color: white;
   display: inline-block;
   padding: 20px 10px;
   background-color: #DD3333;

}

.sections-entry-title h2:before {
   content: '';
   position: absolute;
   left: 0;
   margin-top: 20px;
   transform: translateY(-50%);
   height: 3px;
   background: white;
   width: 100%;
   z-index: -1;
}

另外，谢谢大家指出我正确的方向。

@Chris我在我的代码中保留这个，谢谢

transform: translateY(-50%);

H2标签重叠文本

6 个答案: