响应进度条

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/