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

标签 html css html-lists flexbox

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

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

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

这是最好的布局方式吗？

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

编辑 1(澄清目标):

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

enter image description here

进度条和红色<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>

最佳答案

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

  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>

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

关于html - 在节点之间布局进度条 - HTML & CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39344830/

上一篇：html - 当颜色小于 50% 时移除渐变

下一篇：html - 使 flex-box 中 child 的高度相同

相关文章：

javascript - 如何 chop 无序列表并允许用户单击以显示全部？

css - Internet Explorer 不呈现自定义列表项中的前导文本

html - 纯 CSS off-canvas 左右菜单(非 Bootstrap )——只有其中一个有效

css - 表单 CSS 样式正在影响 Bootstrap 按钮

css - Sass背景百分比位置

html - 在鼠标悬停时显示页面的垂直滚动条

css - Flexbox css 无序列表自定义样式

php - 如何将数据库中存储的密码显示为星号或任何字符

javascript - 检测页面元素中选择(突出显示)或单击的内容？

html - 如何通过 Bootstrap 响应让 Center Div 堆栈在顶部？

©2024 IT工具网  联系我们