html - 使用 CSS flex，我怎样才能在我的标题之后到行尾获得一行（如 hr 元素）

Question

我想在我的标题之后添加一些看起来像一行的东西到行尾：

.d-flex {
  display: flex;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: white;
}

.d-flex h2.text-primary {
 background: blue;
 flex: 0 0 3rem;
}

.d-flex h2:not(.text-primary) {
  background: red;
  flex: 1;
}

.hr {
  height: 2px;
  background: cyan;
}

<b>This is aligned left</b>

<div class="d-flex">
  <H2 class="text-primary">1&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>

<b>This is aligned right</b>

<div class="d-flex">
  <H2 class="text-primary">2&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right">Hello World</H2>
    <P class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>

<b>This should have a "hr" <u>after</u> the title to the end of the line</b>

<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <div class="hr"></div>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>


<b>This should have a "hr" <u>before</u> the title to the beggining of the title line</b>

<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right">Hello World</H2>
    <div class="hr"></div>
    <P class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>

在我的第三个示例中，我添加了div.hr.

使用 flexbox，是否可以：

1. 让它显示在标题之后
2. 位于第一标题行
3. 稍后，我也需要实现相同的功能，但从行首到标题（用于右对齐文本）。

标签： htmlcssflexbox

Answer 1

将标题设置为display: flex,align-items: baseline以使水平线和文本在同一行。然后将标题文本放入<span>并添加 div .hrwithflex: 1使其宽度增长到满。看看演示：

.d-flex {
  display: flex;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: white;
}

.d-flex h2.text-primary {
 background: blue;
 flex: 0 0 3rem;
}

.d-flex h2:not(.text-primary) {
  background: red;
  flex: 1;
}

.hr-baseline {
  display: flex;
  align-items: baseline;
}

.hr {
  height: 2px;
  background: cyan;
  flex: 1;
}

<b>This is aligned left</b>

<div class="d-flex">
  <H2 class="text-primary">1&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>

<b>This is aligned right</b>

<div class="d-flex">
  <H2 class="text-primary">2&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right">Hello World</H2>
    <P class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>

<b>This should have a "hr" <u>after</u> the title to the end of the line</b>

<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="hr-baseline"><span>Hello World</span><div class="hr"></div></H2>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>


<b>This should have a "hr" <u>before</u> the title to the beggining of the title line</b>

<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right hr-baseline"><div class="hr"></div><span>Hello World</span></H2>
    <P class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>