Space 列表项在宽度变化时均匀内联
Space list items evenly inline when their width varies
我连续显示了 5 个标签。我希望他们之间的距离均匀 spaced。当它们的宽度都相同时,我可以使用以下 css:
li{
margin-left: 2%;
width: 18%;
}
但是,当我更改宽度时,它会抛出所有内容。每个的宽度都不同,不再基于百分比,所以我不能使用这种方法。有人知道我现在如何 space 将它们均匀地排在一条线上吗?
这是一个代码笔,展示了它现在的情况:
flexbox
可以做到。
ul {
display: flex;
justify-content: space-between;
}
ul {
display: flex;
justify-content: space-between;
}
.outstanding-balance {
width: 210px;
background-color: rgba(0, 136, 204, .3);
}
.credit-paid {
width: 200px;
background-color: rgba(0, 136, 204, .3);
}
.approved {
width: 130px;
background-color: rgba(0, 136, 204, .3);
}
.denied {
width: 110px;
background-color: rgba(0, 136, 204, .3);
}
.time-to-pay {
width: 205px;
background-color: rgba(0, 136, 204, .3);
}
.badge {
margin-left: 21px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
<li><a class="outstanding-balance">Outstanding Balance <span class="badge"></span></a>
</li>
<li><a class="credit-paid">Total Credit Paid <span class="badge">0</span></a>
</li>
<li><a class="approved">Approved <span class="badge">12</span></a>
</li>
<li><a class="denied">Denied <span class="badge">2</span></a>
</li>
<li><a class="time-to-pay">Avg. time to pay <span class="badge">67 Days</span></a>
</li>
</ul>
我连续显示了 5 个标签。我希望他们之间的距离均匀 spaced。当它们的宽度都相同时,我可以使用以下 css:
li{
margin-left: 2%;
width: 18%;
}
但是,当我更改宽度时,它会抛出所有内容。每个的宽度都不同,不再基于百分比,所以我不能使用这种方法。有人知道我现在如何 space 将它们均匀地排在一条线上吗?
这是一个代码笔,展示了它现在的情况:
flexbox
可以做到。
ul {
display: flex;
justify-content: space-between;
}
ul {
display: flex;
justify-content: space-between;
}
.outstanding-balance {
width: 210px;
background-color: rgba(0, 136, 204, .3);
}
.credit-paid {
width: 200px;
background-color: rgba(0, 136, 204, .3);
}
.approved {
width: 130px;
background-color: rgba(0, 136, 204, .3);
}
.denied {
width: 110px;
background-color: rgba(0, 136, 204, .3);
}
.time-to-pay {
width: 205px;
background-color: rgba(0, 136, 204, .3);
}
.badge {
margin-left: 21px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
<li><a class="outstanding-balance">Outstanding Balance <span class="badge"></span></a>
</li>
<li><a class="credit-paid">Total Credit Paid <span class="badge">0</span></a>
</li>
<li><a class="approved">Approved <span class="badge">12</span></a>
</li>
<li><a class="denied">Denied <span class="badge">2</span></a>
</li>
<li><a class="time-to-pay">Avg. time to pay <span class="badge">67 Days</span></a>
</li>
</ul>