這個問題在這里已經有了答案：
![如何調整一行中點之間的間距？[復制]](https://img.uj5u.com/2022/01/14/45ba8295b52a413db33fe2679287263f.png)
如何調整以在所有點之間留有空格，如下所示？
![如何調整一行中點之間的間距？[復制]](https://img.uj5u.com/2022/01/14/de82d776e1154c6db42165ea8d97f029.png)
uj5u.com熱心網友回復：
就我而言，我將簡單地在.cma--step-dot::before.
.cma--steps {
margin: 10px auto;
position: relative;
max-width: 500px;
}
.cma--step-dot {
display: inline-block;
width: 15px;
border-radius: 50%;
height: 15px;
background: blue;
border: 5px solid #e8e8e8;
position: relative;
top: -8px;
}
.cma--step-dot:before {
content:"";
display:block;
width: 24px;
border-radius: 50%;
height: 24px;
background: white;
position:absolute;
top: -10px;
left:-10px;
z-index:-1;
}
.cma--step-bar {
position: absolute;
top: 0;
left: 20px;
right: 0;
height: 3px;
background: red;
width: 410px;
z-index:-1;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cma--steps">
<div class="cma--step-bar"></div>
<div class="row">
<div class="col-8">
<div>
<span class="cma--step-dot"></span>
<span class="cma--step-title">A</span>
</div>
</div>
<div class="col-2">
<div>
<span class="cma--step-dot"></span>
<span class="cma--step-title">B</span>
</div>
</div>
<div class="col-2">
<div>
<span class="cma--step-dot"></span>
<span class="cma--step-title">C</span>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
嘗試為點的類別添加邊距。根據位置，它應該是向右或向左或兩者都有邊距
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410702.html
標籤：
上一篇：如何去除手機上的藍色樣式？