Question

我试图在空心圆圈之间绘制一条水平线（没有背景），如何从一个圆圈到另一个圆圈画一条线以完全匹配而不进入另一个圆圈或不到达它？

完成了示例

＆＃13;

#wizard {
  background-color: #eee;
  display: inline-block;
  padding: 15px;
}
#wizard .step {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 1px solid #000;
  border-radius: 50%;
  text-align: center;
  padding: 2px;
  margin-right: 3em;
  margin-left: 3em;
  position: relative;
}
#wizard .step:after {
  content: "";
  display: block;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: auto;
  right: -100%;
  width: 100%;
  top: 50%;
}
#wizard .step:last-child:after {
  display: none;
}
#wizard .step span {
  padding: 11px;
  display: block;
}

＆＃13;

<div id="wizard">
  <div class="step active">
    <span>1</span>
  </div>
  <div class="step">
    <span>2</span>
  </div>
  <div class="step">
    <span>3</span>
  </div>
</div>

＆＃13;

Answer 1

由于您的margin-right和margin-left都是3em，请尝试使用6em代替100%

 left:auto;
 right:-6em;
 width:6em;

留下一点空间，但你可以调整它：

right:-6.3em;
width:6.3em;

Answer 2

如果你要绝对定位你的int count_unique( std::string str ) { std::sort( str.begin(), str.end() ); char last = 0; int count = 0; for( char c : str ) if( last != c ) { last = c; ++count; } return count; }伪元素，你需要知道两件事：

应该从哪里开始
应该多长时间

您可以看到它应该从哪里开始，因为$pdf = new FPDI('P','mm',array(225.37,261.719)); $pdf->SetMargins(0,0,0); $pdf->SetAutoPageBreak(true,0); $pdf->AddFont('Chrioc','','CHRIOC__.php'); $mid_x=112.685; $pdf->AddPage(); $pdf->setSourceFile("source/empty.pdf"); $tplIdx = $pdf->importPage(1); $pdf->useTemplate($tplIdx,0,0,225.37,261.719); $pdf->SetFont('Chrioc','',55); $pdf->SetTextColor(255,255,255); $pdf->Text($mid_x-($pdf->GetStringWidth("aaa")/2),100,"aaa"); $pdf->Text($mid_x-($pdf->GetStringWidth("bbb")/2),168,"bbb"); $pdf->Output(); ?>的边框为#wizard .step::after，填充为#wizard .step，内容宽度为1px。

2px + 40px + 1px + 2px + 40px = 2px

因此，您的排名样式需要包含1px：

46px

至于需要多长时间，它需要跨越当前left: 46px的{{1}}，然后是#wizard .step::after { position: absolute; top: 50%; left: 46px; }的{{1}}。

由于这些都是margin-right，因此您可以将#wizard .step伪元素margin-left #wizard .step给予它。

全部放在一起：

3em

#wizard .step::after

NB 我真的不清楚为什么，但是虽然上述方法的结果应该是完美无瑕的，但实际结果还是包含了微小的差距 - 从20世纪50年代的教科书中给出了每一个人的印象。

如果您想消除这些差距，请使用以下样式声明：

width

透明背景的圆圈之间的水平线

2 个答案: