我想让步骤之间的线条更长或者可能粘在盒子上。我尝试更改此 css .bullet.completed::after 但它不起作用。我将宽度设置为 100% 的原因是因为我希望它能够响应。
我已在此处附加了片段。有人可以帮我解决这个问题吗?提前致谢!
const previousBtn = document.getElementById('previousBtn');
const nextBtn = document.getElementById('nextBtn');
const finishBtn = document.getElementById('finishBtn');
const content = document.getElementById('content');
const bullets = [...document.querySelectorAll('.bullet')];
const MAX_STEPS = 4;
let currentStep = 1;
nextBtn.addEventListener('click', () => {
bullets[currentStep - 1].classList.add('completed');
currentStep += 1;
previousBtn.disabled = false;
if (currentStep === MAX_STEPS) {
nextBtn.disabled = true;
finishBtn.disabled = false;
}
content.innerText = `Step Number ${currentStep}`;
});
previousBtn.addEventListener('click', () => {
bullets[currentStep - 2].classList.remove('completed');
currentStep -= 1;
nextBtn.disabled = false;
finishBtn.disabled = true;
if (currentStep === 1) {
previousBtn.disabled = true;
}
content.innerText = `Step Number ${currentStep}`;
});
finishBtn.addEventListener('click', () => {
location.reload();
});
#stepProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.step {
text-align: center;
width: 20%;
}
.step-text {
margin-bottom: 10px;
color: #000;
}
.bullet {
border: 1px solid #000;
height: 20px;
width: 20px;
color: #000;
display: inline-block;
position: relative;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.completed {
color: white;
background-color: #000;
}
.bullet.completed::after {
content: '';
position: absolute;
right: -60px;
bottom: 10px;
height: 1px;
width: 100%;
background-color: #000;
}
/* Base styles and helper stuff */
.hidden {
display: none;
}
button {
padding: 5px 10px;
border: 1px solid black;
transition: 250ms background-color;
}
button:hover {
cursor: pointer;
background-color: black;
color: white;
}
button:disabled:hover {
opacity: 0.6;
cursor: not-allowed;
}
.text-center {
text-align: center;
}
.container {
max-width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
<div class="container">
<div id="stepProgressBar">
<div class="step">
<p class="step-text">Super Duper Long Title</p>
<div class="bullet">1</div>
</div>
<div class="step">
<p class="step-text">Long Long Title</p>
<div class="bullet">2</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet">3</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">4</div>
</div>
</div>
<div id="main">
<p id="content" class="text-center">Step Number 1</p>
<button id="previousBtn" class="hidden"></button>
<button id="nextBtn">Next</button>
<button id="finishBtn" class="hidden">Finish</button>
</div>
</div>
最佳答案
我使用 CSS calc
函数来找到行长度的最佳位置。计算:宽度:calc(133% - 21px);
。
计算的21px
部分是:
- 数字宽度的一半 (
20px
/2 = 10) 4px
表示相邻框的边框7px
左边距将线移离框的中心。
我还不确定为什么 133%
有效 🤔。此外,我从 .bullet
类中删除了 position:relative
并将其移至 .step
父级。
const previousBtn = document.getElementById('previousBtn');
const nextBtn = document.getElementById('nextBtn');
const finishBtn = document.getElementById('finishBtn');
const content = document.getElementById('content');
const bullets = [...document.querySelectorAll('.bullet')];
const MAX_STEPS = 4;
let currentStep = 1;
nextBtn.addEventListener('click', () => {
bullets[currentStep - 1].classList.add('completed');
currentStep += 1;
previousBtn.disabled = false;
if (currentStep === MAX_STEPS) {
nextBtn.disabled = true;
finishBtn.disabled = false;
}
content.innerText = `Step Number ${currentStep}`;
});
previousBtn.addEventListener('click', () => {
bullets[currentStep - 2].classList.remove('completed');
currentStep -= 1;
nextBtn.disabled = false;
finishBtn.disabled = true;
if (currentStep === 1) {
previousBtn.disabled = true;
}
content.innerText = `Step Number ${currentStep}`;
});
finishBtn.addEventListener('click', () => {
location.reload();
});
#stepProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.step {
text-align: center;
width: 20%;
position: relative;
}
.step-text {
margin-bottom: 10px;
color: #000;
}
.bullet {
border: 1px solid #000;
height: 20px;
width: 20px;
color: #000;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.completed {
color: white;
background-color: #000;
}
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width: calc(133% - 21px);
background-color: #000;
margin-left: 7px;
}
/* Base styles and helper stuff */
.hidden {
display: none;
}
button {
padding: 5px 10px;
border: 1px solid black;
transition: 250ms background-color;
}
button:hover {
cursor: pointer;
background-color: black;
color: white;
}
button:disabled:hover {
opacity: 0.6;
cursor: not-allowed;
}
.text-center {
text-align: center;
}
.container {
max-width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
<div class="container">
<div id="stepProgressBar">
<div class="step">
<p class="step-text">Super Duper Long Title</p>
<div class="bullet">1</div>
</div>
<div class="step">
<p class="step-text">Long Long Title</p>
<div class="bullet">2</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet">3</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">4</div>
</div>
</div>
<div id="main">
<p id="content" class="text-center">Step Number 1</p>
<button id="previousBtn" class="hidden"></button>
<button id="nextBtn">Next</button>
<button id="finishBtn" class="hidden">Finish</button>
</div>
</div>
关于html - 步骤进度条 - 进度编号框之间的线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60481651/