CODEWITHSUNDEEP
css
user2511874
user2511874

Reputation:

Draw a static line between two divs

I have three divs on the same line and want to connect them with a line:

Unfortunately, every way I tried collided with the method of display, e.g. inline-block and vertically aligned spacer divs of height 50% with bottom-border.

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

Upvotes: 9

Views: 34513

Answers (3)

benomatis
benomatis

Reputation: 5633

Try this:

div.boxItem { 
  display: inline-block;
  border: 1px solid black;
  padding: 1em;
}

div.line {
  display: inline-block;
  border-top: 1px solid black;
  width: 2em;
}
<div class="boxItem">1</div><!--
--><div class="line"></div><!--
--><div class="boxItem">2</div><!--
--><div class="line"></div><!--
--><div class="boxItem">3</div>

Note: I used <!-- and --> to comment out the white space ensuring the line actually touches the divs. More info on that bit: https://stackoverflow.com/a/19038859/2037924

EDIT: Same in CodePen, for the case you like that more for some reason: https://codepen.io/anon/pen/wBPPRz

Upvotes: 3

G-Cyrillus
G-Cyrillus

Reputation: 105863

if it stands on 1 line, you could add pseudo element and filter first and last box, to draw or not a line aside.

div.boxItem { 
  display: inline-block;
  border: 1px solid black;
  padding: 1em;  
  margin-right: 5em;
  position:relative
}

.boxItem:before,
.boxItem:after
{
  content:'';
  width:5em;/* size of your margin */
  border-bottom:1px solid;
  position:absolute;
  top:50%;

}
:after {
  left:100%;
}
:before {
  right:100%;
}
.boxItem:first-of-type:before,
.boxItem:last-of-type:after {
  display:none;
}
.myBox {
  white-space:nowrap; 
/* */ text-align:center;
  }
body {

}
<div class="myBox">
  <div class="boxItem">1</div>
  <div class="boxItem">2</div>
  <div class="boxItem">3</div>
  <div class="boxItem">4</div>
</div>
<div class="myBox">
  <div class="boxItem">1</div>
  <div class="boxItem">2</div>
  <div class="boxItem">3</div>
</div>
<div class="myBox">
  <div class="boxItem">1</div>
  <div class="boxItem">2</div>
</div>
<div class="myBox">
  <div class="boxItem">1</div>
</div>

fork of your pen

Upvotes: 31

Selketjah
Selketjah

Reputation: 73

You could add a div with the width of your margin:

<div class="boxItem">1</div>
<div class="emptyDiv"></div>
<div class="boxItem">2</div>
<div class="emptyDiv"></div>
<div class="boxItem">3</div>

CSS:

div {
  display: inline-block;
}

div.emptyDiv{
 border: 1px solid black;
 width:25em;
}

div.boxItem { 
  border: 1px solid black;
  padding: 1em;
}

Upvotes: 0

Related Questions