intro.js

Question

有没有更干净的方法？如何将进度条定位在 introjs-tooltip 的最底部？这是我的CSS，我想要的应该look like this。

.introjs-progress {
    width: 112%;
    opacity: 1;
    margin: 0;
    bottom: -65px;
    position: relative;
    left: -25px;
}

现在，我的进度条是标准布局，它位于步骤介绍文本下方和步骤按钮上方。这是它的样子：notice the bar is above steps

祝您2017年身体健康，财源广进，新年快乐！ GLHF

Answer 1

在 progress 元素上使用绝对定位，并在其父元素 tooltip 上添加一些额外的底部填充以实现美观。

.introjs-tooltip {
    padding: 10px 10px 14px 10px;
}

.introjs-tooltipbuttons, .introjs-tooltiptext {
    text-align: center;
}

.introjs-progress {
    overflow: hidden;
    position: absolute;
    height: 5px;
    bottom: 0;
    left: 0;
    width: 100%;
    /* margin: 10px 0 5px 0; */
    /* border-radius: 4px; */
    background-color: #ecf0f1;
}

intro.js - 重新定位进度条并放在底部（在步骤下方）

intro.js - reposition progress bar and put on bottom (beneath steps)

html

javascript

css