CSS在两个元素之间画一条线
[英]CSS Drawing a line between two elements
问题描述
I've been trying to draw a line down the middle of a series of circles however if I set a line ( .Line1 ) to fit between the first and last element then it's drawn from the top left of the first element and not centralised. 
我一直在尝试在一系列圆的中间绘制一条线，但是，如果我将一条线（ .Line1 ）设置为适合第一个和最后一个元素，那么它将从第一个元素的左上角绘制而不会居中。 If i set a line ( .Line2 ) to fit in the middle by changing the percentages it will look fine at 100% zoom however if you zoom in or out of the screen it moves around. 如果我通过更改百分比将一条线（ .Line2 ）设置为适合中间位置，则在100％缩放时看起来会很好，但是如果放大或缩小屏幕，它就会四处移动。
I know it is possible to do using pure javascript however I cannot figure out how to do it with css created elements. 我知道可以使用纯JavaScript，但是我无法弄清楚如何使用CSS创建的元素来做到这一点。
<style>
.A,.B,.C,.D, .E {
position: absolute;
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.A {
top: 10%;
left: 50%;
}
.B {
top: 25%;
left: 50%;
}
.C {
top: 40%;
left: 50%;
}
.D {
top: 55%;
left: 50%;
}
.E {
top: 70%;
left: 50%;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 4px;
background: black;
}
.Line2{
position: absolute;
left: 51.3%;
top: 15%;
height: 60%;
width: 4px;
background: black;
}
</style>
<body>
<div class = "A"></div>
<div class = "B"></div>
<div class = "C"></div>
<div class = "D"></div>
<div class = "E"></div>
<div class = "Line1"></div>
<div class = "Line2"></div>
</body>
http://codepen.io/anon/pen/ZWMbNe http://codepen.io/anon/pen/ZWMbNe
3 个解决方案
解决方案1
1 已采纳 2016-04-25 12:00:34
You need to take border, width and height into account. 您需要考虑边框，宽度和高度。 you cannot draw half a pixel. 您不能绘制半像素。 For example this is a center line: 例如，这是一条中心线：
.A,.B,.C,.D, .E {
position: absolute;
width: 46px;
height: 46px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 2px;
background: black;
transform: translate(24px,23px);
}
解决方案2
0 2016-04-25 11:53:56
give one of the lines a margin-left that will be equal to half of the circle's width. 将其中一条线的左边距设置为等于圆的宽度的一半。 that way the line will always stay in the middle no matter if you zoom in or out. 这样，无论您放大还是缩小，线条始终会停留在中间。
.Line1{
position: absolute;
left: 50%;
top: 15%;
height: 60%;
width: 4px;
margin-left:23px;
margin-top:0px;
background: black;
}
解决方案3
0 2016-04-25 12:01:57
You need to wrap your circles into a parent Element. 您需要将圈子包装到父元素中。 So that you can align the Black line according to the parent Div and not the window size. 这样您就可以根据父Div而不是窗口大小对齐黑色线。
Moreover you can use the pseudo selector :before or :after for the line. 此外，您可以在行中使用伪选择器:before或:after 。
HTML 的HTML
<div class="cirCont">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
</div>
CSS 的CSS
.A,.B,.C,.D, .E {
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.cirCont{
float:left;
position:relative;
top: 100px;
left: 50%;
}
.cirCont:after{
content:"";
position: absolute;
left: calc(50% - 2px);
top: 10%;
height: 80%;
width: 4px;
background: black;
z-index:10;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.