CSS circles and lines - connectors

Question

I am trying to create some lines and circles that connect themselves with each other.

Here is my attempt but I am only able to connect the first circle to the first line, however I want to have several displayed horizontally.

Code from fiddle:

<!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>

Answer 1

The problem is caused by the spaces between your circle and line elements.

To solve it, you can use one of the following:

Use floating. Downside: floating converts elements to blocks, so it breaks the vertical aligning of inline-blocks.
Use font-size: 0 . Downside: it breaks lengths with em units.
Use text-space-collapse: trim-inner . Downside: is a draft, no browser support.
Wrap the spaces in html comments.

^{(Also see Ignore whitespace in HTML )}

In your case, the last one is the best:

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

You can see it in action in this Demo .

_{(Note I also added white-space: nowrap to avoid breaking lines, and z-index:1 to show circles above lines)}

CSS circles and lines - connectors

Question

1 answers

solution1
4 ACCPTED 2014-03-04 23:40:16

CSS circles and lines - connectors

Question

1 answers

solution1 4 ACCPTED 2014-03-04 23:40:16

solution1
4 ACCPTED 2014-03-04 23:40:16