在两个div之间绘制一条静态线 [英] Draw a static line between two divs

问题描述

我在同一行上有三个div，并希望将它们与一行连接:

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

不幸的是，我尝试的每种方式都与显示方法相冲突，例如inline-block和高度50%与bottom-border垂直对齐的间隔div.

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

推荐答案

如果它位于1条线上，则可以添加伪元素并过滤第一个和最后一个框，以画出或不画出一条线

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>

您的笔叉

这篇关于在两个div之间绘制一条静态线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！