工作中同事发现的问题:

很简单的输入框,当输入用户名错误的时候会在旁边弹出一个小提示:输入错误。

样式是这样的:

.login-ipt{
    list-style: none;
}
.login-ipt li{
    position: relative;
    margin-bottom: 20px;
    width: 300px;
}
.tip{
    position: absolute;
    padding: 0 20px;
    font-size: 12px;
    top: 10px;
    left: 320px;
    color: #FFF;
    background: #009DE4;
}

然后发现了一个很神奇的问题,如果.tip不给宽度的话,这个样式是无法自适应的,始终被挤在一起。

后来研究解决方法是

.tip样式里加入white-space: nowrap;属性即可解决。