gpt4 book ai didi

html - 如何使用 CSS 连接两个阶段的圆圈

转载 作者:行者123 更新时间:2023-11-28 04:02:36 25 4
gpt4 key购买 nike

各位,

我们正在尝试连接不同阶段的两条线路,但似乎 stage2 正在移动到不同的线路。

如何用线连接这两个阶段(圆圈),使它们出现在同一条线上。截至目前,它总是会换行。

代码如下:

.circle {
width: 10px;
height: 10px;
border-radius: 15px 15px 15px 15px;
padding: 5px;
background: white;
border: 1px solid green;
}

.circle-inner {
width: 10px;
height: 10px;
border-radius: 10px 10px 10px 10px;
background: green;
}
<font face="Times New Roman" size="1">stage1</font>
<span class="circle" style="display:block">
<span class="circle-inner" style="display:block"></span>
</span>
<hr style="height:1px; margin-top:-10px; border:none; color:#000; background-color:#000;width:80px;margin-left:22px">
<font face="Times New Roman" size="1">stage2</font>
</span>
<span class="circle" style="display:block">
<span class="circle-inner" style="display:block"></span>
</span>
<hr style="height:1px; margin-top:-11px; border:none; color:#000; background-color:#000;width:80px;margin-left:22px">

最佳答案

像这样?

.circle {
width: 10px;
height: 10px;
border-radius: 15px 15px 15px 15px;
padding: 5px;
background: white;
border: 1px solid green;
}

.circle-inner {
width: 10px;
height: 10px;
border-radius: 10px 10px 10px 10px;
background: green;
}
<div style="display:inline-block;">
<font face="Times New Roman" size="1">stage1</font>
<span class="circle" style="display:block">
<span class="circle-inner" style="display:block"></span>
</span>
<hr style="height:1px; margin-top:-10px; border:none; color:#000; background-color:#000;width:80px;margin-left:22px">
</div><!--
--><div style="display:inline-block;">
<font face="Times New Roman" size="1">stage2</font>
<span class="circle" style="display:block">
<span class="circle-inner" style="display:block"></span>
</span>
<hr style="height:1px; margin-top:-11px; border:none; color:#000; background-color:#000;width:80px;margin-left:22px">
</div>

关于html - 如何使用 CSS 连接两个阶段的圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43112800/

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