html – 循环步骤指示器步骤名称位置

概述我正在为我的表单构建步骤指示器. 我在codepen上找到了很好的例子,我正在尝试根据自己的需要进行自定义. HTML结构如下所示： <div class="progress"> <div class="circle done"> <span class="label">1</span> <span class="title">Order informati 我正在为我的表单构建步骤指示器.
我在codepen上找到了很好的例子,我正在尝试根据自己的需要进行自定义.

HTML结构如下所示：

<div >    <div >        <span >1</span>        <span >Order informations</span>    </div>    <span ></span>    <div >        <span >4</span>        <span >Order revIEw</span>    </div>    <span ></span>    <div >        <span >5</span>        <span >Finish</span>    </div></div>

和CSS：

*,*:after,*:before {    margin: 0;    padding: 0;    Box-sizing: border-Box;    Font-family:"Open Sans";}/* Form Progress */ .progress {    wIDth: 1000px;    margin: 20px auto;    text-align: center;    padding-bottom: 80px;}.progress .circle,.progress .bar {    display: inline-block;    background: #fff;    wIDth: 40px;    height: 40px;    border-radius: 40px;    border: 1px solID #d5d5da;}.progress .bar {    position: relative;    wIDth: 80px;    height: 6px;    margin: 0 -5px 17px -5px;    border-left: none;    border-right: none;    border-radius: 0;    top: -16px;}.progress .circle .label {    display: inline-block;    wIDth: 32px;    height: 32px;    line-height: 32px;    border-radius: 32px;    margin-top: 3px;    color: #b5b5ba;    Font-size: 17px;}.progress .circle .Title {    color: #b5b5ba;    Font-size: 13px;    line-height: 30px;    margin-left: -5px;}/* Done / Active */ .progress .bar.done,.progress .circle.done {    background: #eee;}.progress .bar.active {    background: linear-gradIEnt(to right,#EEE 40%,#FFF 60%);}.progress .circle.done .label {    color: #FFF;    background: #8bc435;    Box-shadow: inset 0 0 2px rgba(0,.2);}.progress .circle.done .Title {    color: #444;}.progress .circle.active .label {    color: #FFF;    background: #0c95be;    Box-shadow: inset 0 0 2px rgba(0,.2);}.progress .circle.active .Title {    color: #0c95be;}

如果我有一个单词作为步骤描述一切都正确对齐,但如果我有两个单词,我得到这个结果：

这是显示我的结果的代码段：

var i = 1;$('.progress .circle').removeClass().addClass('circle');$('.progress .bar').removeClass().addClass('bar');setInterval(function() {  $('.progress .circle:nth-of-type(' + i + ')').addClass('active');  $('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');  $('.progress .circle:nth-of-type(' + (i - 1) + ') .label').HTML('✓');  $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');  $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');  i++;  if (i == 8) {    $('.progress .circle').removeClass().addClass('circle');    $('.progress .bar').removeClass().addClass('bar');    i = 1;  }},1000);

*,*:before {  margin: 0;  padding: 0;  Box-sizing: border-Box;  Font-family: "Open Sans";}/* Form Progress */.progress {  wIDth: 1000px;  margin: 20px auto;  text-align: center;  padding-bottom: 80px;}.progress .circle,.progress .bar {  display: inline-block;  background: #fff;  wIDth: 40px;  height: 40px;  border-radius: 40px;  border: 1px solID #d5d5da;}.progress .bar {  position: relative;  wIDth: 80px;  height: 6px;  margin: 0 -5px 17px -5px;  border-left: none;  border-right: none;  border-radius: 0;  top: -16px;}.progress .circle .label {  display: inline-block;  wIDth: 32px;  height: 32px;  line-height: 32px;  border-radius: 32px;  margin-top: 3px;  color: #b5b5ba;  Font-size: 17px;}.progress .circle .Title {  color: #b5b5ba;  Font-size: 13px;  line-height: 30px;  margin-left: -5px;}/* Done / Active */.progress .bar.done,.progress .circle.done {  background: #eee;}.progress .bar.active {  background: linear-gradIEnt(to right,#FFF 60%);}.progress .circle.done .label {  color: #FFF;  background: #8bc435;  Box-shadow: inset 0 0 2px rgba(0,.2);}.progress .circle.done .Title {  color: #444;}.progress .circle.active .label {  color: #FFF;  background: #0c95be;  Box-shadow: inset 0 0 2px rgba(0,.2);}.progress .circle.active .Title {  color: #0c95be;}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script><link href='http://Fonts.GoogleAPIs.com/CSS?family=Open+Sans' rel='stylesheet' type='text/CSS'><div >  <div >    <span >1</span>    <span >Order</span>  </div>  <span ></span>  <div >    <span >2</span>    <span >Address</span>  </div>  <span ></span>  <div >    <span >3</span>    <span >Payment</span>  </div>  <span ></span>  <div >    <span >4</span>    <span >RevIEw</span>  </div>  <span ></span>  <div >    <span >5</span>    <span >Finish</span>  </div></div><div >  <div >    <span >1</span>    <span >Order informations</span>  </div>  <span ></span>  <div >    <span >4</span>    <span >Order revIEw</span>  </div>  <span ></span>  <div >    <span >5</span>    <span >Finish</span>  </div></div>

这里是Jsfiddle相同的代码：http://jsfiddle.net/Misiu/40udkfov/3/

我需要修复文本对齐,理想情况下,文本将在每行下方的圆圈下方居中.

更新：

这是显示当前结果和预期的图像：

http://jsfiddle.net/Misiu/40udkfov/9/

更新2

最终版本基于@dippas greate答案：

http://jsfiddle.net/Misiu/40udkfov/12/

解决方法 只需在你的.progress .circle .Title中添加一个白色空格：pre并在单词之间留出空格,这里.progress .bar从80px增加到100px或者你喜欢的任何东西.
请参阅下面的代码段

var i = 1;$('.progress .circle').removeClass().addClass('circle');$('.progress .bar').removeClass().addClass('bar');setInterval(function() {  $('.progress .circle:nth-of-type(' + i + ')').addClass('active');  $('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');  $('.progress .circle:nth-of-type(' + (i - 1) + ') .label').HTML('✓');  $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');  $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');  i++;  if (i == 8) {    $('.progress .circle').removeClass().addClass('circle');    $('.progress .bar').removeClass().addClass('bar');    i = 1;  }},.progress .bar {  display: inline-block;  background: #fff;  wIDth: 40px;  height: 40px;  border-radius: 40px;  border: 1px solID #d5d5da;}.progress .bar {  position: relative;  wIDth: 100px;  height: 6px;  margin: 0 -5px 17px -5px;  border-left: none;  border-right: none;  border-radius: 0;  top: -16px;}.progress .circle .label {  display: inline-block;  wIDth: 32px;  height: 32px;  line-height: 32px;  border-radius: 32px;  margin-top: 3px;  color: #b5b5ba;  Font-size: 17px;}.progress .circle .Title {  color: #b5b5ba;  Font-size: 13px;  line-height: 30px;  margin-left: -5px;  white-space:pre;}/* Done / Active */.progress .bar.done,.2);}.progress .circle.active .Title {  color: #0c95be;}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script><link href='http://Fonts.GoogleAPIs.com/CSS?family=Open+Sans' rel='stylesheet' type='text/CSS'><div >  <div >    <span >1</span>    <span >Order</span>  </div>  <span ></span>  <div >    <span >2</span>    <span >Address</span>  </div>  <span ></span>  <div >    <span >3</span>    <span >Payment</span>  </div>  <span ></span>  <div >    <span >4</span>    <span >RevIEw</span>  </div>  <span ></span>  <div >    <span >5</span>    <span >Finish</span>  </div></div><div >  <div >    <span >1</span>    <span >Order informations</span>  </div>  <span ></span>  <div >    <span >4</span>    <span >Order revIEw</span>  </div>  <span ></span>  <div >    <span >5</span>    <span >Finish</span>  </div></div>

根据评论进行编辑以回答：

添加：显示：阻止并更改你的行高：30px到行高：18px在your.progress .circle .Title

改变你的顶部：-16px到顶部：.progress .bar中的16px.

将vertical-align：top添加到.progress .circle,.progress .bar

请记住,inline-block默认为vertical-align：baseline.

var i = 1;$('.progress .circle').removeClass().addClass('circle');$('.progress .bar').removeClass().addClass('bar');setInterval(function() {  $('.progress .circle:nth-of-type(' + i + ')').addClass('active');  $('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');  $('.progress .circle:nth-of-type(' + (i - 1) + ') .label').HTML('✓');  $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');  $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');  i++;  if (i == 8) {    $('.progress .circle').removeClass().addClass('circle');    $('.progress .bar').removeClass().addClass('bar');    i = 1;  }},.progress .bar {  display: inline-block;  background: #fff;  wIDth: 40px;  height: 40px;  border-radius: 40px;  border: 1px solID #d5d5da;  vertical-align:top;}.progress .bar {  position: relative;  wIDth: 80px;  height: 6px;  margin: 0 -5px 17px -5px;  border-left: none;  border-right: none;  border-radius: 0;  top:16px;}.progress .circle .label {  display: inline-block;  wIDth: 32px;  height: 32px;  line-height: 32px;  border-radius: 32px;  margin-top: 3px;  color: #b5b5ba;  Font-size: 17px;}.progress .circle .Title {  color: #b5b5ba;  Font-size: 13px;  line-height: 18px;  margin:10px 0 0 -5px;  display: block}/* Done / Active */.progress .bar.done,.2);}.progress .circle.active .Title {  color: #0c95be;}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script><div >  <div > <span >1</span>    <span >Order</span>  </div> <span ></span>  <div > <span >2</span>    <span >Address</span>  </div> <span ></span>  <div > <span >3</span>    <span >Payment</span>  </div> <span ></span>  <div > <span >4</span>    <span >RevIEw</span>  </div> <span ></span>  <div > <span >5</span>    <span >Finish</span>  </div></div><div >  <div > <span >1</span>    <span >Order informations</span>  </div> <span ></span>  <div > <span >4</span>    <span >Order revIEw</span>  </div> <span ></span>  <div > <span >5</span>    <span >Finish</span>  </div></div>

总结

以上是内存溢出为你收集整理的html – 循环步骤指示器步骤名称位置全部内容，希望文章能够帮你解决html – 循环步骤指示器步骤名称位置所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。