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

: 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 라인 위 원 보여) 또한이 같은 somerhing 갈 수}

출처

2014-03-04 23:40:16 Oriol

그 때까지 답변이 없을 경우 이것으로 돌아갈 것입니다 그것은 위대한 작품! 하지만 정말로 그렇게해야합니까? 픽셀로 전환하면 두 번째 방법을 사용할 수 있습니까? (플러스 1), 좋은 노력). – user2779312

@ user2779312 예, 픽셀 (또는 글꼴 크기에 종속적이지 않은 단위)로 전환하거나'.circle, .line {font-size : 16px}'[** 데모 **]로 재설정 할 수 있습니다 http://jsfiddle.net/v9Vqe/4/) – Oriol

CSS 동그라미 및 선 - 커넥터

답변

관련 문제