我需要做這種滑塊，它只是由一條線連接的三個圓圈，每個圓圈下面都有一個描述：
但目前我只有這個：
這是我用來做的代碼：
<div
class="
text-center
my-5
px-5
d-flex
align-items-center
justify-content-between
slider-container
"
>
<div class="slider-item">
<i
class="
icon-circle
fs-16 fs-md-20
d-inline-block
text-gray-300
"
></i>
<p class="m-0 font-RobotoBold1 fs-10 fs-md-12 mt-2">
Selecciona <br />
cantidad
</p>
</div>
<div>
<i
class="
icon-circle
fs-16 fs-md-20
d-inline-block
text-gray-300
"
></i>
<p class="m-0 font-RobotoBold1 fs-10 fs-md-12 mt-2">
Selecciona <br />
destino
</p>
</div>
<div>
<i
class="
icon-circle
fs-16 fs-md-20
d-inline-block
text-gray-300
"
></i>
<p class="m-0 font-RobotoBold1 fs-10 fs-md-12 mt-2">
Confirma <br />
transferencia
</p>
</div>
</div>
這是css代碼：
.slider-container {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
overflow: hidden;
}
.slider-container::before {
position: absolute;
top: calc(50% - 20px);
right: 0;
left: 0;
Content: "";
Background-color: grey;
height: 1px;
z-index: -1;
}
任何人都知道如何在圓圈后面劃出那條線并且不超過它們？
提前致謝。
uj5u.com熱心網友回復：
旁注：這就是為什么我永遠不會使用 tailwindcss 之類的。你不需要它，它完全破壞了 HTML。
現在將您擁有的標記與下面的標記進行比較——a) 更加簡潔，b) 僅使用單個 CSS 類，c) 使用適當的語意元素來完成這項作業。
它也適用于 2 或 4 或 7 個專案。當然，它需要對活動圓圈的大小和顏色進行一些改進，但這對您來說應該很容易調整。
此解決方案的唯一限制是您的頁面背景顏色必須是純色并與::after元素的背景顏色相匹配。
document.querySelectorAll('.steplist').forEach(steplist => {
steplist.addEventListener('click', function(event) {
if (event.target.nodeName !== 'LI') return;
const items = event.target.closest('.steplist').querySelectorAll('li');
for (const item of items) {
item.classList.toggle('active', item === event.target);
}
});
});*, ::after, ::before { box-sizing: border-box; }
.steplist {
border-top: 2px solid #ccc;
display: inline-flex;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
list-style-type: none;
gap: 7em;
margin: 0;
padding: 0;
--circle-radius: 8px;
}
.steplist li {
color: #999;
cursor: pointer;
padding: calc(5px var(--circle-radius)) 0 0;
margin: 0;
position: relative;
text-align: center;
}
.steplist li::before {
background-color: #ccc;
border-radius: 50%;
content: '';
position: absolute;
height: calc(2 * var(--circle-radius));
width: calc(2 * var(--circle-radius));
top: 0;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.steplist .active {
color: black;
}
.steplist .active::before {
background-color: green;
box-shadow: 0 0 0 3px rgba(0,255,0,.25);
}
.steplist li:first-child::after {
background-color: white;
content: '';
position: absolute;
height: 2px;
width: 100%;
top: -2px;
left: calc(-50% - var(--circle-radius));
}
.steplist li:last-child::after {
background-color: white;
content: '';
position: absolute;
height: 2px;
width: 100%;
top: -2px;
left: calc(50% var(--circle-radius));
}
.circle-big {
--circle-radius: 12px;
}<ol class="steplist">
<li>Point 1<br>whatever</li>
<li>Point 2<br>whatever</li>
<li>Point 3<br>whatever</li>
</ol>
<br><br><br>
<ol class="steplist circle-big">
<li>Point 1<br>whatever</li>
<li>Point 2<br>whatever</li>
<li>Point 3<br>whatever</li>
<li>Point 4<br>whatever</li>
</ol>uj5u.com熱心網友回復：
最后我用這段代碼解決了這個問題，我添加了自定義類，這樣你就可以理解它們是什么，在滑塊容器中：之前，公式'top：calc(50% - 22px)'，px 可以根據的螢屏大小。：
/* slider css code */
.slider-container {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
overflow: hidden;
}
.slider-container::before {
position: absolute;
top: calc(50% - 22px);
right: 65px;
left: 65px;
content: "";
background-color: #d8d8d8;
height: 1px;
z-index: -1;
}
@media (max-width: 768px) {
.slider-container::before {
top: calc(50% - 22px);
right: 60px;
left: 60px;
}
}
/* this are custom css classes we use at work */
.wi-12 {
width: 12px;
}
.he-12 {
height: 12px;
}
.wi-24 {
width: 24px;
}
.he-24 {
height: 24px;
}
@media (min-width: 768px) {
.wi-md-20 {
width: 20px;
}
.he-md-20 {
height: 20px;
}
.wi-md-30 {
width: 30px;
}
.he-md-30 {
height: 30px;
}
.wi-md-100 {
width: 100px;
}
}
.wi-70 {
width: 70px;
}
.bg-green-700 {
background-color: #00bf79;
}
.bg-gray-300 {
background-color: #bababa;
}
.bor-rounded-full {
border-radius: 50%;
}
.font-Roboto {
font-family: "Roboto";
}
.fs-10 {
font-size: 10px;
}
.fs-md-12 {
font-size: 12px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="
text-center
mt-md-4
px-4
d-flex
align-items-center
justify-content-between
slider-container
mb-md-3
">
<div class="slider-item wi-70 wi-md-100">
<div class="
wi-24
he-24
wi-md-30
he-md-30
bor-rounded-full
d-inline-flex
justify-content-center
align-items-center
" style="
background: rgba(0, 191, 121, 0.3);
">
<div class="wi-12 he-12 wi-md-20 he-md-20 bg-green-700 bor-rounded-full d-inline-block"></div>
</div>
<p class="m-0 font-Roboto fs-10 fs-md-12 mt-2">
Selecciona <br /> cantidad
</p>
</div>
<div class="slider-item wi-70 wi-md-100">
<div class="
wi-24
he-24
wi-md-30
he-md-30
bor-rounded-full
d-inline-flex
justify-content-center
align-items-center
">
<div class="wi-12 he-12 wi-md-20 he-md-20 bg-gray-300 bor-rounded-full d-inline-block"></div>
</div>
<p class="m-0 font-Roboto fs-10 fs-md-12 mt-2">
Selecciona <br /> destino
</p>
</div>
<div class="slider-item wi-70 wi-md-100">
<div class="
wi-24
he-24
wi-md-30
he-md-30
bor-rounded-full
d-inline-flex
justify-content-center
align-items-center
">
<div class="wi-12 he-12 wi-md-20 he-md-20 bg-gray-300 bor-rounded-full d-inline-block"></div>
</div>
<p class="m-0 font-Roboto fs-10 fs-md-12 mt-2">
Confirma <br /> transferencia
</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/405460.html
標籤：
下一篇：如何將滑鼠懸停在下拉選單上？