将进度条移动到选项卡的中心

Question

最近我正在为导航标签实现进度条。我创建了一个div并在其上添加了css。但是，它看起来像这样：

如何将进度条移动到标签的中心？

.wizard-step p {
    margin-top: 10px;
}

.wizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.wizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 16px;
}

.wizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.nav-link {
    margin: auto
}

#progressbar {
    border-radius: 10px;
    height: 7px;
    background-color: orange;
    width: 80%;
    margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="formWizard" class="wizard">
    <div id="progressbar"></div>
    <ul class="nav justify-content-center nav-justified">
        <li class="nav-item wizard-step">
            <a id="tab_start" type="button" class="nav-link active btn btn-primary btn-circle" href="#tabs-1" data-toggle="tab" role="tab" aria-controls="step1" title="Step 1">1</a>
            <p class="hidden-sm-down">Start report</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_report" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-2" data-toggle="tab" role="tab" aria-controls="step2" title="Step 2">2</a>
            <p>Report payroll</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_review" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-3" data-toggle="tab" role="tab" aria-controls="step3" title="Step 3">3</a>
            <p>Review and submit</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_confirm" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-4" data-toggle="tab" role="tab" aria-controls="step4" title="Step 4">4</a>
            <p>Print confirmation</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_pay" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-5" data-toggle="tab" role="tab" aria-controls="step5" title="Step 5">5</a>
            <p>View balance or pay</p>
        </li>
    </ul>

我对css很新。有什么想法吗？

Answer 1

您可以将position:relative;和top: 15px;添加到进度条ID，以将其向下移动并居中。

＆＃13;

＆＃13;

.wizard-step p {
    margin-top: 10px;
}

.wizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.wizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 16px;
}

.wizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.nav-link {
    margin: auto
}

#progressbar {
    border-radius: 10px;
    height: 7px;
    background-color: orange;
    width: 80%;
    margin: 0 auto;
    position: relative;
    top: 15px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="formWizard" class="wizard">
    <div id="progressbar"></div>
    <ul class="nav justify-content-center nav-justified">
        <li class="nav-item wizard-step">
            <a id="tab_start" type="button" class="nav-link active btn btn-primary btn-circle" href="#tabs-1" data-toggle="tab" role="tab" aria-controls="step1" title="Step 1">1</a>
            <p class="hidden-sm-down">Start report</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_report" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-2" data-toggle="tab" role="tab" aria-controls="step2" title="Step 2">2</a>
            <p>Report payroll</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_review" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-3" data-toggle="tab" role="tab" aria-controls="step3" title="Step 3">3</a>
            <p>Review and submit</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_confirm" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-4" data-toggle="tab" role="tab" aria-controls="step4" title="Step 4">4</a>
            <p>Print confirmation</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_pay" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-5" data-toggle="tab" role="tab" aria-controls="step5" title="Step 5">5</a>
            <p>View balance or pay</p>
        </li>
    </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您无需更改任何内容。只需在代码中添加bootstrap 4即可。它会相应调整。唯一的更改是从代码中删除type="button"以显示数字圈。早些时候它是压倒性的，而不是执行你的CSS。

.wizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.btn-circle {
  width: 40px;
  height: 40px;
  padding: 10px 0px;
  border-radius: 30px !important;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
}

.wizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
}

.nav-link {
  margin: auto
}

#progressbar {
  border-radius: 10px;
  height: 7px;
  background-color: orange;
  width: 80%;
  margin: 0 auto;
}

.nav-link.disabled {
  background-color: #00ff00;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div id="formWizard" class="wizard">
  <div id="progressbar"></div>
  <ul class="nav justify-content-center nav-justified">
    <li class="nav-item wizard-step">
      <a href="#tabs-1" class="nav-link active btn btn-primary btn-circle" id="tab_start" data-toggle="tab" role="tab" aria-controls="step1" title="Step 1">1</a>

      <p class="hidden-sm-down">Start report</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_report" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-2" data-toggle="tab" role="tab" aria-controls="step2" title="Step 2">2</a>
      <p>Report payroll</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_review" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-3" data-toggle="tab" role="tab" aria-controls="step3" title="Step 3">3</a>
      <p>Review and submit</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_confirm" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-4" data-toggle="tab" role="tab" aria-controls="step4" title="Step 4">4</a>
      <p>Print confirmation</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_pay" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-5" data-toggle="tab" role="tab" aria-controls="step5" title="Step 5">5</a>
      <p>View balance or pay</p>
    </li>
  </ul>

Answer 3

您可以将position: relative设置为#progressbar并将其向下移动18.5px，这是.btn-circle height +的一半它自己的一半height：

＆＃13;

＆＃13;

.wizard-step p {
  margin-top: 10px;
}

.wizard-step button[disabled] {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.wizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 16px;
}

.wizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
}

.nav-link {
  margin: auto
}

#progressbar {
  border-radius: 10px;
  height: 7px;
  background-color: orange;
  width: 80%;
  margin: 0 auto;
  position: relative; /* positioned relative to its normal position */
  top: 18.5px; /* moved down by 18.5px */
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

<div id="formWizard" class="wizard">
  <div id="progressbar"></div>
  <ul class="nav justify-content-center nav-justified">
    <li class="nav-item wizard-step">
      <a id="tab_start" type="button" class="nav-link active btn btn-primary btn-circle" href="#tabs-1" data-toggle="tab" role="tab" aria-controls="step1" title="Step 1">1</a>
      <p class="hidden-sm-down">Start report</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_report" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-2" data-toggle="tab" role="tab" aria-controls="step2" title="Step 2">2</a>
      <p>Report payroll</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_review" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-3" data-toggle="tab" role="tab" aria-controls="step3" title="Step 3">3</a>
      <p>Review and submit</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_confirm" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-4" data-toggle="tab" role="tab" aria-controls="step4" title="Step 4">4</a>
      <p>Print confirmation</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_pay" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-5" data-toggle="tab" role="tab" aria-controls="step5" title="Step 5">5</a>
      <p>View balance or pay</p>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;