Question

我是该领域的新手，我想创建选项卡，并发现以下流程选项卡功能。 https://codepen.io/rt99/pen/BaBWwRG

我想用它添加新的进程/图标，但是它在下一行显示当前行上的t。我希望他们都在同一行。

<div class="container">
<div class="row">
<div class="col-xs-12">

在浏览资源时我很困惑，应该如何更改。

Answer 1

一种解决方法是使用<script async src="extFile.js"> $(document).onload(destroyEarth); </script>并使宽度等于float:left。修改如下

width: calc(100%/6);

.process-model li {
  width: calc(100%/6);
  text-align: center;
  float: left;
  position: relative;
}

// script for tab steps
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {

  var href = $(e.target).attr('href');
  var $curr = $(".process-model  a[href='" + href + "']").parent();

  $('.process-model li').removeClass();

  $curr.addClass("active");
  $curr.prevAll().addClass("visited");
});
// end  script for tab steps

.design-process-section .text-align-center {
  line-height: 25px;
  margin-bottom: 12px;
}

.design-process-content {
  border: 1px solid #e9e9e9;
  position: relative;
  padding: 16px 34% 30px 30px;
}

.design-process-content img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  max-height: 100%;
}

.design-process-content h3 {
  margin-bottom: 16px;
}

.design-process-content p {
  line-height: 26px;
  margin-bottom: 12px;
}

.process-model {
  list-style: none;
  padding: 0;
  position: relative;
  max-width: 600px;
  margin: 20px auto 26px;
  border: none;
  z-index: 0;
}

.process-model li::after {
  background: #e5e5e5 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  margin: 0 auto;
  position: absolute;
  right: -30px;
  top: 33px;
  width: 85%;
  z-index: -1;
}

.process-model li.visited::after {
  background: #57b87b;
}

.process-model li:last-child::after {
  width: 0;
}

.process-model li {
  width: calc(100%/6);
  text-align: center;
  float: left;
  position: relative;
}

.nav-tabs.process-model>li.active>a,
.nav-tabs.process-model>li.active>a:hover,
.nav-tabs.process-model>li.active>a:focus,
.process-model li a:hover,
.process-model li a:focus {
  border: none;
  background: transparent;
}

.process-model li a {
  padding: 0;
  border: none;
  color: #606060;
}

.process-model li.active,
.process-model li.visited {
  color: #57b87b;
}

.process-model li.active a,
.process-model li.active a:hover,
.process-model li.active a:focus,
.process-model li.visited a,
.process-model li.visited a:hover,
.process-model li.visited a:focus {
  color: #57b87b;
}

.process-model li.active p,
.process-model li.visited p {
  font-weight: 600;
}

.process-model li i {
  display: block;
  height: 68px;
  width: 68px;
  text-align: center;
  margin: 0 auto;
  background: #f5f6f7;
  border: 2px solid #e5e5e5;
  line-height: 65px;
  font-size: 30px;
  border-radius: 50%;
}

.process-model li.active i,
.process-model li.visited i {
  background: #fff;
  border-color: #57b87b;
}

.process-model li p {
  font-size: 14px;
  margin-top: 11px;
}

.process-model.contact-us-tab li.visited a,
.process-model.contact-us-tab li.visited p {
  color: #606060!important;
  font-weight: normal
}

.process-model.contact-us-tab li::after {
  display: none;
}

.process-model.contact-us-tab li.visited i {
  border-color: #e5e5e5;
}

@media screen and (max-width: 560px) {
  .more-icon-preocess.process-model li span {
    font-size: 23px;
    height: 50px;
    line-height: 46px;
    width: 50px;
  }
  .more-icon-preocess.process-model li::after {
    top: 24px;
  }
}

@media screen and (max-width: 380px) {
  .process-model.more-icon-preocess li {
    width: 16%;
  }
  .more-icon-preocess.process-model li span {
    font-size: 16px;
    height: 35px;
    line-height: 32px;
    width: 35px;
  }
  .more-icon-preocess.process-model li p {
    font-size: 8px;
  }
  .more-icon-preocess.process-model li::after {
    top: 18px;
  }
  .process-model.more-icon-preocess {
    text-align: center;
  }
}

Answer 2

您可以在CSS中更改以下代码。

.process-model li {
    display: inline-block;
    width: 16%; <-- changed from 18% to 16%
    text-align: center;
    float: none;
}

Answer 3

每个li的宽度为18％。所以6个超过100％将宽度更改为16％。

.process-model li {
    display: inline-block;
    width: 16%;
    text-align: center;
    float: none;
}

https://codepen.io/urich/pen/WNepZzq

Answer 4

.process-model li的{{1}}为100（最大宽度的百分比）/ 6（li）将为您提供16％的附加值和一些小数，因此您应将其更改为16％或更少。但是，实际上，它应该花费更少的代码来实现该结果。

Answer 5

您只需添加此CSS

.process-model{
  display: flex;
}

在一行中显示图标。如果您想进一步了解flex，请转到此link

谢谢

Answer 6

您只需要在.process-model li中更改一个css 将宽度：calc（100％/ 6）替换为宽度：calc（100％/ 7），以便第7个iteam自动调整。

.process-model li {
    width: calc(100%/7);
    text-align: center;
    float: left;
    position: relative;
}

有关更多详细信息，请参见以下示例， https://jsfiddle.net/jignashagpatel/tgy13o94/1/

如何修复图标列对齐方式

6 个答案: