hr elements vertically between buttons?

Question

I need to get an hr element in between 2 buttons so that it is vertically centered in between them.

This is my codepen, I've been struggling to find a decent solution. Could anybody please take a quick look?

Right now they are below and above.

<button class="left">Test</button>
<hr />
<button class="right">Test</button>

There doesn't seem to be one. I recommend that you look at this: http://stackoverflow.com/questions/571900/is-there-a-vr-vertical-rule-in-html — guergana, Jul 01 '15 at 14:13
hr means `horizontal rule`. If you want vertical divider. Check the answers below. — Adrian Enriquez, Jul 01 '15 at 14:14
Do you want something like [THIS](http://codepen.io/anon/pen/OVQRow) — Abhi, Jul 01 '15 at 14:18

Bhojendra Rauniyar · Answer 1 · 2015-07-01T14:26:22.133

hr element is supposed to be used horizontally talking in semantically. Instead of hr element you can use an span element. But why do you create unnecessary element while you can make this without needing any element. You can just apply a border on button element.

example:

button.left{
    border-right: 1px solid #000;
}

Alternatively, you could set border-left for the right button too.

By the way, it's not recommend way to use still while talking in semantic. You should use div for the layout and inside that div put your button elements and apply the border on div.

score 2 · Accepted Answer · answered Jul 01 '15 at 14:23

2

Not sure if this was the solution that you were looking for but I made a pen with the hr 'joining the two buttons'.

The easiest way is to use absolute positioning as that allows the buttons to be dynamic, like this:

hr {
position: absolute;
  width: 100%;
  top: 0;
  z-index: -1;
}

http://codepen.io/anon/pen/xGYEyE

Hope this solves your problem!

answered Jul 01 '15 at 14:23

Harvey Ball

131
5

This is what I mean yeah. It just needs a little padding so it doesn't touch the buttons completely though. Kind of like it's floating between them. Thanks for the help so far. – Stephan-v Jul 01 '15 at 14:55

score 0 · Answer 3 · answered Jul 01 '15 at 14:14

0

There doesn't seem to be one. But you can do something like: <div style="border-left:1px solid #000;height:500px"></div>

answered Jul 01 '15 at 14:14

guergana

374
5
19

hr elements vertically between buttons?

3 Answers3