使用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. 稍后，我还需要实现相同的功能，但是要从行的开头到标题（对于右对齐的文本）。

Answer 1

将标题设置为display: flex ， align-items: baseline以在同一行中制作水平线和文本。 然后将标题文本放入<span>并添加带有flex: 1 div .hr以使其宽度变大。 看一下演示：

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

Answer 2

无论采用哪种引导程序，都可以通过以下方法实现此效果：

 .divider { display: flex; align-items: center; padding: 0 1rem; } .divider:before, .divider:after { content: ''; flex: 0 1 100%; border-bottom: 1px solid #ccc; margin: 0 1rem; } .divider:before { margin-left: 0; } .divider:after { margin-right: 0; } .divider[data-position="right"]:after, .divider[data-position="left"]:before { content: none; } 

 <h2 class="divider" data-position="left">Divider</h2> <span class="divider">Divider</span> <div class="divider" data-position="right">Divider</div> 

可以与任何非 空元素一起使用 ）。

增长到父级宽度或max-width值。

SCSS版本，允许设置颜色，笔触，填充和选择器：

$divider-selector: ".divider";
$divider-line-color: #ccc;
$divider-padding: 1rem;
$divider-stroke: 1em;

#{$divider-selector} {
  display: flex;
  align-items: center;
  padding: 0 $divider-padding;
  &:before,
  &:after {
    content: '';
    flex: 0 1 100%;
    border-bottom: $divider-stroke solid $divider-line-color;
    margin: 0 $divider-padding;
    transform: translateY(#{$divider-stroke} / 2)
  }
  &:before {
    margin-left: 0;
  }
  &:after {
    margin-right: 0;
  }
  &[data-position="right"]:after,
  &[data-position="left"]:before {
    content: none;
  }
}

摆弄 。