gpt4 book ai didi

html - CSS 圆和线 - 连接器

转载 作者:可可西里 更新时间:2023-11-01 12:48:25 24 4
gpt4 key购买 nike

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

这里是 my attempt但我只能将第一个圆圈连接到第一行,但是我想水平显示几个。

来自 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>

最佳答案

问题是由 circleline 元素之间的空格引起的。

要解决它,您可以使用以下方法之一:

  • 使用 float 。缺点: float 将元素转换为 block ,因此它破坏了内联 block 的垂直对齐。
  • 使用字体大小: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 以在行上方显示圆圈)

关于html - CSS 圆和线 - 连接器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22185133/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com