CSS圓圈和線條 - 連接器

我正在嘗試創建一些線條和圓圈，它們可以相互連接。CSS圓圈和線條 - 連接器

這裏是my attempt但我只能連接第一個圓到第一行，但我想有幾個水平顯示。從小提琴

代碼：

<!DOCTYPE html> 
<head> 
<style> 
.flow { 
    height: 5em; 
    left: -0.3em; 
} 

.flow div:first-child { 
    left: 0em; 
} 

.circle { 
    border-radius: 50%; 
    display: inline-block; 
    background: green; 
    width: 2.5em; 
    height: 2.5em; 
    box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75); 
    -moz-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75); 
    -webkit-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75); 
    position: relative; 
    left:inherit; 
} 

.line { 
    display: inline-block; 
    background: green; 
    height: 0.5em; 
    width: 300px; 
    position: relative; 
    margin-bottom: 1.0em; 
    box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75); 
    -moz-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75); 
    -webkit-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75); 
    left:inherit; 
} 
</style> 
</head> 
<body> 
    <div class="flow"> 
     <div id="circle1" class="circle"></div> 
     <div class="line"> </div> 
     <div id="circle1" class="circle"></div> 
    </div> 
</body>

來源

2014-03-04 user2779312

你也可以去與somerhing這樣的：http://jsfiddle.net/dq7pf/11/ –

@NicoO尼斯，但我需要有長度屬性的行，並從圓分開。 – user2779312

我不能編輯下一個小時的編輯。如果到那時爲止還沒有答案，請回到這裏 –

問題是由您的circle和line元件之間的空間造成的。

爲了解決這個問題，你可以使用下列之一：

使用浮動。下行：浮動將元素轉換爲塊，因此打破了行內塊的垂直對齊。
使用font-size: 0。下行：它與em單位打破長度。
使用text-space-collapse: trim-inner。下行：是一個草案，沒有瀏覽器支持。
包裝html註釋中的空格。

^{（另見Ignore whitespace in HTML）}

在你的情況下，最後一個是最好的：

<div class="flow"><!-- 
    --><div class="circle"></div><!-- 
    --><div class="line"></div><!-- 
--></div>

你可以看到它的行動在這個Demo。

_{（請注意我還添加了white-space: nowrap避免斷裂線，並z-index:1顯示上述各行圓）}

來源

2014-03-04 23:40:16 Oriol

它很棒！但是我真的需要這樣嗎？如果我切換到像素可以使用第二種方法嗎？（加1同時:)，很好的努力）。 – user2779312

@ user2779312是的，你可以切換到像素（或任何非依賴字體大小的單位），或者你可以用'.circle，.line {font-size：16px}'[** Demo **]（ http://jsfiddle.net/v9Vqe/4/） – Oriol

CSS圓圈和線條 - 連接器

回答

相關問題