html - 响应式进度条

Question

我想制作一个带有文本的响应式密码强度栏。在更大尺寸的输入上，它在进度条和文本之后留出很大的空间。

你可以在我的JSFiddle中看到(只需更改示例窗口的大小)

还有代码

.password-strength{
    width: 100%;
    margin-top: 10px;
}

.password-strength>span{
    background: transparent!important;
    width: 35%;
    display: inline-block;
    text-align: right;
}

.progress-bar{
    width: 80%;
    height: 1px;
    background: #dedede;
    display: -webkit-inline-box;
    width: 63%;
    height: 1px;
    background: #dedede;
}

.progress-bar>div{}

.progress-bar .danger, .password-strength .danger{
    background: #f2373e;
    color: #f2373e;
}

.progress-bar .acceptable, .password-strength .acceptable{
    background: #64aa64;
    color: #64aa64;
}

.progress-bar .strong, .password-strength .strong{
    background: #0099ff;
    color: #0099ff;
}

.input-field{
    max-width: 100%;
    position: relative;
    margin: 60px auto;
}

.input-field-width{
    border: 1px solid black;
    width: 100%;max-width:700px;height: 45px;
}

@media(max-width:250px){
  .progress-bar{width:100%}
}

<div class="input-field">
			<div class="input-field-width"></div>

			<div class="password-strength-overflow">

				<div class="password-strength">
					<div class="progress-bar"><div class="danger" style="width:30%;"></div></div>
					<span class="danger">Very weak</span>
				</div>

			</div>
		</div>

有什么建议我需要做什么吗？

Answer 1

添加以下样式

.progress-bar{
    width: calc(100% - 80px);
}

从跨度中删除宽度

.password-strength>span{
    background: transparent!important;
    display: inline-block;
    text-align: right;
}

这是演示 https://jsfiddle.net/z2qtuvnt/2/