文本和下划线的 CSS 定位答案

【问题标题】：CSS positioning of a text and underline文本和下划线的 CSS 定位
【发布时间】：2019-10-16 08:52:39
【问题描述】：

我正在尝试实现以下效果，但在定位文本和使下划线移至屏幕末尾时遇到了一些问题。

.header {
  height: 550px;
  width: 100%;
  background-color: #1F2041;
  position: relative;
}
    
.header h1, .header h2{
  color: white;
  font-size: 52px;
  text-transform: uppercase;
  margin-bottom: 20px;
  border-bottom: 1.5px solid currentColor;
  line-height: 0.7;
  position: absolute;
  top: 210px;
}
    
.header p {
  margin-top: 40px;
  color: white;
}

<div class="header">
  <h2>About</h2>
  <h2>Nikola</h2>
  <p>Simple. Modern. Yours.</p>
</div>

This is what I'm trying to achieve

【问题讨论】：

使用 flexbox 而不是使用所有这些定位技巧，您的生活会更轻松地维护您的代码

标签： html css text underline

【解决方案1】：

也许你需要这样的东西？使用绝对 div，您可以更改他在父相对 div 中的位置。

您设置了一个静态高度，因此大约以 150 像素的顶部和底部作为边距，您可以得到所需的高度

请记住，当使用 position:absolute; 时，它是相对于带有 position:relative 的父 div 的

.header {
  height: 550px;
  width: 100%;
  background-color: #1F2041;
  position: relative;
}

.content-div{
  position:absolute;
  margin: 150px 0 150px auto;
  width: 250px;
  right: 0;
}

.header h1, .header h2{
  color: white;
  font-size: 52px;
  text-transform: uppercase;
  margin-bottom: 20px;
  border-bottom: 1.5px solid currentColor;
  line-height: 0.7;
}
    
.header p {
  margin-top: 40px;
  color: white;
}

<div class="header">
  <div class="content-div">
    <h2>About</h2>
    <h2>Nikola</h2>
    <p>Simple. Modern. Yours.</p>
  </div>
</div>

【讨论】：

【解决方案2】：

尝试这样的事情，使用浮动和清除。根据需要调整 400px 的大小。也许这种方式 (float) 不是最好的方式，最好只使用边距，但尽量避免使用position: absolute，否则元素可能会很快重叠。

.header {
    height: 550px;
    width: 100%;
    background-color: #1F2041;
    text-align: right;
}
.header * {
    float: right;
    clear: right;
    width: 400px;
    text-align: left;
    color: white;
    margin: 0 0 20px;
}

.header h1, .header h2{
    color: white;
    font-size: 52px;
    text-transform: uppercase;
    border-bottom: 1.5px solid currentColor;
}

<div class="header">
    <h2>About</h2>
    <h2>Nikola</h2>
    <p>Simple. Modern. Yours.</p>
</div>

【讨论】：