如何將串列項保持在同一行？-有解無憂

我正在使用一些步進器，我無法修改它。我想添加第 5 步，但是當我這樣做時，它是在新行中，而不是在同一行中。這是原始步進器：

如何將串列項保持在同一行？

在我的更改之后，它看起來像：

如何將串列項保持在同一行？

但我希望它看起來像

如何將串列項保持在同一行？

到目前為止，我有 5 個步驟。但它不在同一行。如果有人可以幫助我，我將不勝感激。

$(document).ready(function() {
  var currentGfgStep, nextGfgStep, previousGfgStep;
  var opacity;
  var current = 1;
  var steps = $("fieldset").length;

  setProgressBar(current);

  $(".next-step").click(function() {

    currentGfgStep = $(this).parent();
    nextGfgStep = $(this).parent().next();

    $("#progressbar li").eq($("fieldset")
      .index(nextGfgStep)).addClass("active");

    nextGfgStep.show();
    currentGfgStep.animate({
      opacity: 0
    }, {
      step: function(now) {
        opacity = 1 - now;

        currentGfgStep.css({
          'display': 'none',
          'position': 'relative'
        });
        nextGfgStep.css({
          'opacity': opacity
        });
      },
      duration: 500
    });
    setProgressBar(  current);
  });

  $(".previous-step").click(function() {

    currentGfgStep = $(this).parent();
    previousGfgStep = $(this).parent().prev();

    $("#progressbar li").eq($("fieldset")
      .index(currentGfgStep)).removeClass("active");

    previousGfgStep.show();

    currentGfgStep.animate({
      opacity: 0
    }, {
      step: function(now) {
        opacity = 1 - now;

        currentGfgStep.css({
          'display': 'none',
          'position': 'relative'
        });
        previousGfgStep.css({
          'opacity': opacity
        });
      },
      duration: 500
    });
    setProgressBar(--current);
  });

  function setProgressBar(currentStep) {
    var percent = parseFloat(100 / steps) * current;
    percent = percent.toFixed();
    $(".progress-bar")
      .css("width", percent   "%")
  }

  $(".submit").click(function() {
    return false;
  })
});

* {
  margin: 0;
  padding: 0
}

html {
  height: 100%
}

h2 {
  color: #2F8D46;
}

#form {
  text-align: center;
  position: relative;
  margin-top: 20px
}

#form fieldset {
  background: white;
  border: 0 none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-bottom: 20px;
  position: relative
}

.finish {
  text-align: center
}

#form fieldset:not(:first-of-type) {
  display: none
}

#form .previous-step,
.next-step {
  width: 100px;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 0px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px 10px 0px;
  float: right
}

.form,
.previous-step {
  background: #616161;
}

.form,
.next-step {
  background: #2F8D46;
}

#form .previous-step:hover,
#form .previous-step:focus {
  background-color: #000000
}

#form .next-step:hover,
#form .next-step:focus {
  background-color: #2F8D46
}

.text {
  color: #2F8D46;
  font-weight: normal
}

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  color: lightgrey
}

#progressbar .active {
  color: #2F8D46
}

#progressbar li {
  list-style-type: none;
  font-size: 15px;
  width: 25%;
  float: left;
  position: relative;
  font-weight: 400
}

#progressbar #step1:before {
  content: "1"
}

#progressbar #step2:before {
  content: "2"
}

#progressbar #step3:before {
  content: "3"
}

#progressbar #step4:before {
  content: "4"
}

#progressbar #step5:before {
  content: "5"
}

#progressbar li:before {
  width: 50px;
  height: 50px;
  line-height: 45px;
  display: block;
  font-size: 20px;
  color: #ffffff;
  background: lightgray;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  padding: 2px
}

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: lightgray;
  position: absolute;
  left: 0;
  top: 25px;
  z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #2F8D46
}

.progress {
  height: 20px
}

.progress-bar {
  background-color: #2F8D46
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center">
    <div class="col-11 col-sm-9 col-md-7
                col-lg-6 col-xl-5 text-center p-0 mt-3 mb-2">
      <div class="px-0 pt-4 pb-0 mt-3 mb-3">
        <form id="form">
          <ul id="progressbar">
            <li class="active" id="step1">
              <strong>Step 1</strong>
            </li>
            <li id="step2"><strong>Step 2</strong></li>
            <li id="step3"><strong>Step 3</strong></li>
            <li id="step4"><strong>Step 4</strong></li>
            <li id="step5"><strong>Step 5</strong></li>
          </ul>
          <div class="progress">
            <div class="progress-bar"></div>
          </div> <br>
          <fieldset>
            <h2>Step 1</h2>
            <input type="button" name="next-step" class="next-step" value="Next Step" />
          </fieldset>
          <fieldset>
            <h2>Step 2</h2>
            <input type="button" name="next-step" class="next-step" value="Next Step" />
            <input type="button" name="previous-step" class="previous-step" value="Previous Step" />
          </fieldset>
          <fieldset>
            <h2>Step 3</h2>
            <input type="button" name="next-step" class="next-step" value="Final Step" />
            <input type="button" name="previous-step" class="previous-step" value="Previous Step" />
          </fieldset>
          <fieldset>
            <h2>Step 4</h2>
            <input type="button" name="next-step" class="next-step" value="Final Step" />
            <input type="button" name="previous-step" class="previous-step" value="Previous Step" />
          </fieldset>
          <fieldset>
            <div class="finish">
              <h2 class="text text-center">
                <h2>Step 5</h2>
              </h2>
            </div>
            <input type="button" name="previous-step" class="previous-step" value="Previous Step" />
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

uj5u.com熱心網友回復：

我會使用 Bootstrap 的內置flexbox support ，而不是固定大小（一旦您添加另一個步驟或洗掉一個步驟就錯了）。無論步數如何，這都會自動調整大小。

放在d-flex串列中，同時p-0洗掉默認串列填充。然后放在flex-grow: 1每個串列項上，給它們每個相同的空間。我在 CSS 中做到了這一點，而不是使用可用的grow 類。無論哪種方式都有效。

請注意，我洗掉了浮動樣式。浮動是一種過時的布局技術，應該避免。無論如何，Bootstrap 都提供了 flexbox 和文本對齊類。

$(document).ready(function() {
  var currentGfgStep, nextGfgStep, previousGfgStep;
  var opacity;
  var current = 1;
  var steps = $("fieldset").length;

  setProgressBar(current);

  $(".next-step").click(function() {

    currentGfgStep = $(this).parent();
    nextGfgStep = $(this).parent().next();

    $("#progressbar li").eq($("fieldset")
      .index(nextGfgStep)).addClass("active");

    nextGfgStep.show();
    currentGfgStep.animate({
      opacity: 0
    }, {
      step: function(now) {
        opacity = 1 - now;

        currentGfgStep.css({
          'display': 'none',
          'position': 'relative'
        });
        nextGfgStep.css({
          'opacity': opacity
        });
      },
      duration: 500
    });
    setProgressBar(  current);
  });

  $(".previous-step").click(function() {

    currentGfgStep = $(this).parent();
    previousGfgStep = $(this).parent().prev();

    $("#progressbar li").eq($("fieldset")
      .index(currentGfgStep)).removeClass("active");

    previousGfgStep.show();

    currentGfgStep.animate({
      opacity: 0
    }, {
      step: function(now) {
        opacity = 1 - now;

        currentGfgStep.css({
          'display': 'none',
          'position': 'relative'
        });
        previousGfgStep.css({
          'opacity': opacity
        });
      },
      duration: 500
    });
    setProgressBar(--current);
  });

  function setProgressBar(currentStep) {
    var percent = parseFloat(100 / steps) * current;
    percent = percent.toFixed();
    $(".progress-bar")
      .css("width", percent   "%")
  }

  $(".submit").click(function() {
    return false;
  })
});

* {
  margin: 0;
  padding: 0
}

html {
  height: 100%
}

h2 {
  color: #2F8D46;
}

#form {
  text-align: center;
  position: relative;
  margin-top: 20px
}

#form fieldset {
  background: white;
  border: 0 none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-bottom: 20px;
  position: relative
}

.finish {
  text-align: center
}

#form fieldset:not(:first-of-type) {
  display: none
}

#form .previous-step,
.next-step {
  width: 100px;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 0px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px 10px 0px;
  float: right
}

.form,
.previous-step {
  background: #616161;
}

.form,
.next-step {
  background: #2F8D46;
}

#form .previous-step:hover,
#form .previous-step:focus {
  background-color: #000000
}

#form .next-step:hover,
#form .next-step:focus {
  background-color: #2F8D46
}

.text {
  color: #2F8D46;
  font-weight: normal
}

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  color: lightgrey
}

#progressbar .active {
  color: #2F8D46
}

#progressbar li {
  flex-grow: 1;
  list-style-type: none;
  font-size: 15px;
  font-weight: 400
}

#progressbar #step1:before {
  content: "1"
}

#progressbar #step2:before {
  content: "2"
}

#progressbar #step3:before {
  content: "3"
}

#progressbar #step4:before {
  content: "4"
}

#progressbar #step5:before {
  content: "5"
}

#progressbar li:before {
  width: 50px;
  height: 50px;
  line-height: 45px;
  display: block;
  font-size: 20px;
  color: #ffffff;
  background: lightgray;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  padding: 2px
}

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: lightgray;
  position: absolute;
  left: 0;
  top: 25px;
  z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #2F8D46
}

.progress {
  height: 20px
}

.progress-bar {
  background-color: #2F8D46
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center">
    <div class="col-11 col-sm-9 col-md-7
                col-lg-6 col-xl-5 text-center p-0 mt-3 mb-2">
      <div class="px-0 pt-4 pb-0 mt-3 mb-3">
        <form id="form">
          <ul id="progressbar" class="d-flex p-0">
            <li class="active" id="step1">
              <strong>Step 1</strong>
            </li>
            <li id="step2"><strong>Step 2</strong></li>
            <li id="step3"><strong>Step 3</strong></li>
            <li id="step4"><strong>Step 4</strong></li>
            <li id="step5"><strong>Step 5</strong></li>
          </ul>
          <div class="progress">
            <div class="progress-bar"></div>
          </div> <br>
          <fieldset>
            <h2>Step 1</h2>
            <input type="button" name="next-step" class="next-step" value="Next Step" />
          </fieldset>
          <fieldset>
            <h2>Step 2</h2>
            <input type="button" name="next-step" class="next-step" value="Next Step" />
            <input type="button" name="previous-step" class="previous-step" value="Previous Step" />
          </fieldset>
          <fieldset>
            <h2>Step 3</h2>
            <input type="button" name="next-step" class="next-step" value="Final Step" />
            <input type="button" name="previous-step" class="previous-step" value="Previous Step" />
          </fieldset>
          <fieldset>
            <h2>Step 4</h2>
            <input type="button" name="next-step" class="next-step" value="Final Step" />
            <input type="button" name="previous-step" class="previous-step" value="Previous Step" />
          </fieldset>
          <fieldset>
            <div class="finish">
              <h2 class="text text-center">
                <h2>Step 5</h2>
              </h2>
            </div>
            <input type="button" name="previous-step" class="previous-step" value="Previous Step" />
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

uj5u.com熱心網友回復：

找到了！

在 CSS 中：

#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 20%; /* <-------------- here */
    float: left;
    position: relative;
    font-weight: 400
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/512251.html

標籤：javascript形式推特引导

上一篇：將背景顏色設定為白色會使進度條中的行不可見

下一篇：Bootstrap彈出框未顯示焦點事件上的錨元素