使用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;
  }
}

擺弄 。