【手机图标和后面的输入框在缩小页面的时候，会变成两行 _布局】

手机图标和后面的输入框在缩小页面的时候，会变成两行

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

布局

详细描述

截图

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
body{
    background:#eff0f4;
    width: 100%;
}
.headers{
    background:#68cdd5;
    color: white;
    height: 88px;
    line-height: 88px;
    text-align: center;
    margin-bottom: 15px;
}
.header-c{
font-size: 32px;
position: absolute;
left: 20px;

}
.header-l{
    font-size: 36px;
}
.header-r{
   font-size: 32px;
   position: absolute;
   right: 20px;
   top: 0;
}
.mains{
    background: white;
height: 100px;
}
.iphone{
    width: 100%;
    height: 41px;
    margin-top: 30px;
position: absolute;
left: 20px;
border-right: solid green;
display: inline-block;
}
.inputs{
    width: 100%;
outline: none;
border:none;
margin-left: 67px;
font-size: 32px;
margin-top: 34px;

}

</style>
</head>
<body>
    <header class="headers">
        <p class="header-c">关闭</p>
        <p class="header-l">登陆</p>
        <p class="header-r">注册</p>
    </header>
    <main class="mains">
        <span class="iphone">
            <img src="img2/iphone.png">
            <input type="text" name="" placeholder="请输入手机号" class="inputs">
        </span>

        <span>

        </span>
    </main>
</body>
</html>

编辑于2024-04-19

时间排序

热门排序

[深圳|结业弟子]JS-徐炜
0

方法一： CSS 有个 white-space 属性，给你的iPhone添加上： white-space: nowrap; 即可设置段落中的文本不进行换行。
方法二：绝对定位，给你的input输入框，也设置为absolute绝对定位，把上边距取消掉，也可以实现不换行的效果。

查看全部>

编辑于2018-08-24

去第页