如何使用CSS连接两个圆圈

Question

民间，

我们正在尝试连接两个不同阶段的行，但似乎stage2正在向不同的行移动。

如何将这两个阶段（圆圈）与线条连接起来，使它们出现在同一条线上。截至目前，它正在走向新的一线。

以下代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你说你的内联风格：

<span class="circle" style="display:block">
<span class="circle-inner" style="display:block"></span>

块元素导致相邻元素放置在新行上。相反，请尝试使用display:inline-block：

<span class="circle" style="display:inline-block">
<span class="circle-inner" style="display:inline-block"></span>

顺便说一下，根本没有理由使用内联样式，你可以在头部添加这个定义。

Answer 2

喜欢这个吗？

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

Answer 3

试试这个：

＆＃13;

＆＃13;

[['R1'], ['R2', 'R3'], ['R4'], ['R5']]
[['192.168.255.1'], ['192.168.255.2']]
[['R1'], ['R2'], ['R3'], ['R4']]
[['A'], ['A', 'E', 'B'], ['C']]

＆＃13;

.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;

}
.line_up {
  float:left;
}

＆＃13;

＆＃13;

＆＃13;