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繪製兩個元素

回答

相關問題