Question

我正在尝试创建一些彼此连接的线条和圆圈。

这是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>

Answer 1

问题是由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显示在行上方的圆圈）}

CSS圈子和线 - 连接器

1 个答案: