【发布时间】：2017-01-13 15:57:21
【问题描述】：
我正在尝试构建一个步进向导表单布局，页面顶部有一个栏，其中包含动态数量的步骤（节点）和连接节点的进度条。我无法让进度条和节点合作。
这个想法是让每个节点在页面上水平均匀分布（使用 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;
}
}
}
这是在正确的轨道上吗？
下面是上面的一个sn-p：
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>【问题讨论】：
-
也许this是你想要的？
-
嗨@kukkuz，感谢您的回复。这不是我想要的，我希望在每个节点之间放置一个进度条，而不是一条线。
-
所以你找到了你想要的？
-
也许您可以向我们展示这应该是什么样子以及一些代码显示您到目前为止的位置。
标签： html css html-lists flexbox