Header, hr and btn at the same line

Question

I'm trying to display a header with a hr and a button at the same line. Something like this:

Header ------------------------------------ Button

I've tried with display flex, but the hr changed for a vertical line.

.flex-header {
  display: flex;
}

<div class="flex-header">
<h2> Des habitations pour tous </h2>
<hr/>
<button> Collections </button>
</div>

score 3 · Accepted Answer · answered Feb 25 '21 at 20:36

3

You could just use a <div> with some css to create a <hr>-like line;

.flex-header {
  display: flex;
}

.line {
  display: flex;
  flex-grow: 1;
  height: 1px;
  align-self: center;
  margin: 0 20px;
  background-color: grey;
}

<div class="flex-header">
<h2> Des habitations pour tous </h2>
<div class="line"></div>
<button> Collections </button>
</div>

answered Feb 25 '21 at 20:36

0stone0

34,288
4
39
64

The solution is good, but why the button is too big now? How can I make it have a normal height? – analuspi Feb 26 '21 at 13:42
1

The button is the same size as the original question. Howevery, something like `button { height: 25px; }` should shrink the button? – 0stone0 Feb 26 '21 at 13:48
great! https://codepen.io/analuspi/pen/vYydeKE – analuspi Feb 26 '21 at 13:57

Luis Gustavo Araujo · Answer 2 · 2021-02-25T20:47:33.650

0

you need change te display property of h2 element, by default it is "block", change to "in-line" (so the button is show in side of header)

h2{
  diplay: inline;
}

To horizontal line, remove the display flex and change hr property:

h2{
  hr{ 
  display: inline-block;
  width: 50%;
}
}

Look project: https://codepen.io/Luis4raujo/pen/mdOXdyB

if this help you check as correct or voteup!

edited Feb 25 '21 at 20:47

answered Feb 25 '21 at 20:38

Luis Gustavo Araujo

297
1
11

Why the codepen? An [inline code snippet](https://meta.stackoverflow.com/questions/251361/how-do-i-format-my-code-blocks) should be enough right? – 0stone0 Feb 25 '21 at 20:40
Ow, also, the codepen shows the vertical line, same problem as OP. – 0stone0 Feb 25 '21 at 20:41
the link of codepen is a example of the change. – Luis Gustavo Araujo Feb 25 '21 at 20:41
do you waint horizontal line too? – Luis Gustavo Araujo Feb 25 '21 at 20:42
remove display: flex and change this hr property. Look in codepen now. – Luis Gustavo Araujo Feb 25 '21 at 20:45

score 0 · Answer 3 · answered Feb 25 '21 at 20:49

Make it behave like a table is one way (but needs a few wrapping divs):

<div class="w">
  <span class="a">Des habitations pour tous</span>
  <div class="b"><hr></div>
  <button class="c">COLLECTIONS</button>
</div>

.w {
  display: table;
}
.a, .b, .c {
  display: table-cell;
  white-space: nowrap;
}
.b {
  width: 100%;
}

Header, hr and btn at the same line

3 Answers3