html - 在节点之间布局进度条 - HTML & CSS

Question

我正在尝试构建一个步进向导表单布局，页面顶部有一个栏，其中包含动态数量的步骤(节点)和连接节点的进度条。我无法让进度条和节点合作。

想法是让每个节点在页面上水平均匀分布(已经使用 flexbox 很好地工作)，并且进度条流畅地填充节点之间的间隙。

我目前正在尝试使用 <li>包含进度条的每次迭代 & <a>对，但它的布局不像我需要的那样(进度条表现不流畅，也没有填充 <a> 标签之间的空白区域)。

这是最好的布局方式吗？

虽然我会确认这是在继续之前布置这些内容的最佳方式。

编辑 1(澄清目标):

这张图片是我正在努力实现的一个例子。

进度条和红色<a>节点都在同一个 <li> 内.在这个例子中，我给进度条设置了 90% 的宽度，但目标是只为红色 <a> 分配一个宽度。节点并让元素栏流畅地填充剩余空间。

下面是我目前使用的 HTML 和 SCSS:

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">Project Milestones</div>
  </div>
  <div class="panel-body">
    <ul class="milestone-bar">
      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
            100%
          </div>
        </div>
        <a href="/projects/24?milestone=18">Milestone 1</a>
      </li>

      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
            100%
          </div>
        </div>
        <a href="/projects/24?milestone=39">Milestone 3</a>
      </li>

      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%;">
            50%
          </div>
        </div>
        <a href="/projects/24?milestone=48">Milestone 2</a>
      </li>
    </ul>
  </div>
</div>

ul.milestone-bar {
  padding: 0;
  margin: 0 0 15px 0;
  display: flex;
  li {
    width: 100%;
    list-style: none;
    display: inline-block;;
    a {
      width: 30px;
      height: 30px;
      font-size: 12px;
      border-radius: 15px;
      background-color: red;
      float:right;
      &:hover {
        background: none;
        border: 4px solid blue;
      }
      &:active {
        background-color: darkblue;
      }
      &:focus {
        background-color: green;
      }
    }
    .project-progress {
      background-color: #d3d3d3;
      display: inline-block;
      margin: 0;
    }
  }
}

这是在正确的轨道上吗？

下面是上面的一个片段:

ul.milestone-bar {
  padding: 0;
  margin: 0 0 15px 0;
  display: flex;
}
ul.milestone-bar li {
  width: 100%;
  list-style: none;
  display: inline-block;
}
ul.milestone-bar li a {
  width: 30px;
  height: 30px;
  font-size: 12px;
  border-radius: 15px;
  background-color: red;
  float: right;
}
ul.milestone-bar li a:hover {
  background: none;
  border: 4px solid blue;
}
ul.milestone-bar li a:active {
  background-color: darkblue;
}
ul.milestone-bar li a:focus {
  background-color: green;
}
ul.milestone-bar li .project-progress {
  background-color: #d3d3d3;
  display: inline-block;
  margin: 0;
}

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">Project Milestones</div>
  </div>
  <div class="panel-body">
    <ul class="milestone-bar">
      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
            100%
          </div>
        </div>
        <a href="/projects/24?milestone=18">Milestone 1</a>
      </li>

      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
            100%
          </div>
        </div>
        <a href="/projects/24?milestone=39">Milestone 3</a>
      </li>

      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%;">
            50%
          </div>
        </div>
        <a href="/projects/24?milestone=48">Milestone 2</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

所以我对你的代码做了一些修改:

1. 已添加 flex每个 li在这里创建嵌套的 flex child :

   ul.milestone-bar li {
     width: 100%;
     list-style: none;
     display: flex;
   }
   

2. 已添加 flex: 1使其 flex 到整个宽度并使用 align-self: center 将其垂直对齐到中心给你的project-progress像这样:

   ul.milestone-bar li .project-progress {
     background-color: #d3d3d3;
     display: inline-block;
     margin: 0;
     flex: 1;
     align-self: center
   }
   

3. 添加进度条样式:

    ul.milestone-bar li .project-progress .progress-bar {
       background: #0095FF;
       text-align: center;
    }
   

4. 同时调整了milestone-bar看起来更好:

   ul.milestone-bar li a {
     width: 60px;
     height: 60px;
     font-size: 10px;
     border-radius: 50%;
     background-color: red;
     text-align: center;
     line-height: 60px;
   }
   ul.milestone-bar li a:hover {
     background: none;
     border: 4px solid blue;
     line-height: 52px;
   }
   

5. 为了充值，使用了 box-sizing: border-box到页面中的所有元素，以便更好地管理边框，尤其是在悬停时删除“跳跃”。

* {
  box-sizing: border-box;
}
ul.milestone-bar {
  padding: 0;
  margin: 0 0 15px 0;
  display: flex;
}
ul.milestone-bar li {
  width: 100%;
  list-style: none;
  display: flex;
}
ul.milestone-bar li a {
  width: 60px;
  height: 60px;
  font-size: 10px;
  border-radius: 50%;
  background-color: red;
  text-align: center;
  line-height: 60px;
}
ul.milestone-bar li a:hover {
  background: none;
  border: 4px solid blue;
  line-height: 52px;
}
ul.milestone-bar li a:active {
  background-color: darkblue;
}
ul.milestone-bar li a:focus {
  background-color: green;
}
ul.milestone-bar li .project-progress {
  background-color: #d3d3d3;
  display: inline-block;
  margin: 0;
  flex: 1;
  align-self: center
}
ul.milestone-bar li .project-progress .progress-bar {
    background: #0095FF;
    text-align: center;
}

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">Project Milestones</div>
  </div>
  <div class="panel-body">
    <ul class="milestone-bar">
      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
            100%
          </div>
        </div>
        <a href="/projects/24?milestone=18">Milestone 1</a>
      </li>

      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
            100%
          </div>
        </div>
        <a href="/projects/24?milestone=39">Milestone 3</a>
      </li>

      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%;">
            50%
          </div>
        </div>
        <a href="/projects/24?milestone=48">Milestone 2</a>
      </li>
    </ul>
  </div>
</div>

让我知道您对此的反馈。谢谢!