0

很奇葩的问题,元素在IE,firefox中换行显示,但在chrome中正常。
chrome中效果图

clipboard.png

firefox和IE效果图

clipboard.png

<div class="login">
        <h2>登&nbsp;录&nbsp;系&nbsp;统</h2>
        <form action="">
            <div>
                <label for="name">用户名</label>
                <input type="text" name="name" autofocus>
            </div>
            <div>
                <label for="password">密&nbsp;&nbsp;&nbsp;码</label>
                <input type="password" name="psw">
            </div>
            <div>
                <label for="code">验证码</label>
                <input type="text" name="code" id="code">
            </div>
            <button id="submit">登录</button>
        </form>
    </div>

css样式如下

.login div {
    border-bottom: 1px solid #FFF;
    width: 400px;
    margin: 40px auto;
}

.login label {
    width: 48px;
    float: left;
    clear: left;    
}

.login input {
    outline: none;
    background-color: transparent;
    margin-left: 50px;
    width: 400 - 48 - 50px;
}
2016-07-21 提问
4 个回答
0

已采纳

服了你。你在三个样式里都添加border:1px solid #00ff00看看。

0

发现几个问题,你可以给label加个背景色看看,密码两个字中间空格太多了,导致宽度超过48px,然后label和input想要在一行可以都使用float:left,此时就要去掉input的margin-left:50px了。因为这个会导致label和input中间产生50px(可能你的意思是input距离最左边50px)

0

感谢各位的解答。发现是浏览器默认样式的原因(chrome的input默认没有水平padding,而firefox和IE默认有)。
由于声望不够,连点赞都不行。[无奈]

撰写答案

推广链接