CSS绘制两个元素

之间的直线

我一直想画一条线下来的一系列圆圈的中间但是如果我设置的线路（.Line1），那么第一个和最后一个元素之间，以适应它从顶部排出第一个元素的左边，而不是集中的。如果我通过更改百分比来设置一条线（.Line2）以适应中间比例，则在100％缩放时看起来会很好，但是如果您放大或缩小屏幕，它会四处移动。CSS绘制两个元素

我知道有可能使用纯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

来源

2016-04-25 C.Marks

问题寻求帮助的代码必须包括必要的重现它最短的代码**在问题本身* *。虽然您提供了[**链接到示例或网站**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-如果链接变得无效，那么你的问题对于其他具有相同问题的未来SO用户将没有任何价值。 –

您需要考虑边界，宽度和高度。你不能画出半个像素。例如，这是一条中心线：

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

来源

2016-04-25 12:00:34 Fonzy

谢谢，这个作品完美！ –

此解决方案将工作。但是，这是一种很好的CSS黑客攻击，它是针对弱HTML结构的。 OP需要更好地构建HTML。 – Roy

得到线中的一个的保证金左那将等于圆的宽度的一半。不管你放大还是缩小，线条总是停留在中间。

.Line1{ 
position: absolute; 
left: 50%; 
top: 15%; 
height: 60%; 
width: 4px; 
margin-left:23px; 
margin-top:0px; 
background: black; 
}

来源

2016-04-25 11:53:56 AnatPort

您需要将圆圈包装到父元素中。这样您可以根据父代Div对齐黑线，而不是窗口大小。

此外，您可以使用该行的伪选择:before或:after。

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

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

结帐这个pen

来源

2016-04-25 12:01:57 Roy

CSS绘制两个元素

回答

相关问题