I have three divs on the same line and want to connect them with a line:
我在同一行有三个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
.
不幸的是,我试过的每一种方式都与显示方法相冲突,例如内嵌块和垂直对齐的间隔div高度为50%,带有底边。
http://codepen.io/anon/pen/QwOOZp
3 个解决方案
#1
9
if it stands on 1 line, you could add pseudo element and filter first and last box, to draw or not a line aside.
如果它站在1行,你可以添加伪元素并过滤第一个和最后一个框,以绘制或不绘制一条线。
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>
你的笔叉
#2
0
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://*.com/a/19038859/2037924
注意:我使用 注释掉空白区域,确保线条实际触及div。有关该位的更多信息:https://*.com/a/19038859/2037924
EDIT: Same in CodePen, for the case you like that more for some reason: http://codepen.io/anon/pen/wBPPRz
编辑:在CodePen中也是如此,因为出于某种原因你更喜欢这种情况:http://codepen.io/anon/pen/wBPPRz
#3
0
You could add a div with the width of your margin:
您可以添加一个带有边距宽度的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;
}
#1
9
if it stands on 1 line, you could add pseudo element and filter first and last box, to draw or not a line aside.
如果它站在1行,你可以添加伪元素并过滤第一个和最后一个框,以绘制或不绘制一条线。
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>
你的笔叉
#2
0
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://*.com/a/19038859/2037924
注意:我使用 注释掉空白区域,确保线条实际触及div。有关该位的更多信息:https://*.com/a/19038859/2037924
EDIT: Same in CodePen, for the case you like that more for some reason: http://codepen.io/anon/pen/wBPPRz
编辑:在CodePen中也是如此,因为出于某种原因你更喜欢这种情况:http://codepen.io/anon/pen/wBPPRz
#3
0
You could add a div with the width of your margin:
您可以添加一个带有边距宽度的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;
}