Question

我在同一行有三个div，想要用一行连接它们：

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

Answer 1

如果它位于1行，您可以添加伪元素并过滤第一个和最后一个框，以绘制或不绘制一行。

＆＃13;

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 {

}

＆＃13;

<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>

＆＃13;

fork of your pen

Answer 2

试试这个：

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>

注意：我使用注释掉空白区域，确保线条实际触及div。有关该位的更多信息：https://stackoverflow.com/a/19038859/2037924

编辑：在CodePen中也是如此，因为出于某种原因您更喜欢这种情况：http://codepen.io/anon/pen/wBPPRz

Answer 3

您可以添加一个带宽度宽度的div：

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

在两个div之间绘制一条静态线

3 个答案: