当屏幕缩小的时候，第二个input输入框为什么会移到下一行，如何让他在一行显示，自动弹出滚动条？

1.如何让他在一行显示，自动弹出滚动条？
2.如何让他自动伸缩，不弹出滚动条？
图片描述

图片描述

 <div  class="center">
           <label>门店名称</label>
           <input type="text" name="">
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <label>门店地址</label>
           <input type="text" name="">
   </div>

阅读 3.6k

第一个问题：
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>问题</title>
    <style>
        @media only screen and (min-width: 100px) and (max-width: 550px) {
            .center {
                width: 500%;
            }
        }
    </style>
</head>

<body>
    <div class="center">
        <label>门店名称</label>
        <input type="text" name=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label>门店地址</label>
        <input type="text" name="">
    </div>
</body>

</html>

第二个问题：
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>问题</title>
    <style>
        input {
            margin-right: 30px;
        }
        @media only screen and (min-width: 510px) and (max-width: 550px) {
            input {
                width: 140px;
            }
        }
        @media only screen and (min-width: 488px) and (max-width: 510px) {
            input {
                width: 130px;
            }
        }
        @media only screen and (min-width: 448px) and (max-width: 488px) {
            input {
                width: 110px;
            }
        }
        @media only screen and (min-width: 408px) and (max-width: 448px) {
            input {
                width: 90px;
            }
        }
        @media only screen and (min-width: 388px) and (max-width: 408px) {
            input {
                width: 80px;
            }
        }
        @media only screen and (min-width: 100px) and (max-width: 388px) {
            input {
                display: block;
            }
        }
    </style>
</head>

<body>
    <div class="center">
        <label>门店名称</label>
        <input type="text" name=""> 
        <label>门店地址</label>
        <input type="text" name="">
    </div>
</body>

</html>

一行显示，自动弹出滚动条

css

.center {
    white-space: nowrap; /* 不换行 */
    width: 100%; /* 设置宽度 */
    overflow-x: auto; /* 横向超出范围则显示滚动条 */
}

效果：

自动伸缩，不弹出滚动条

使用百分比（或者相对宽度）布局其中的元素（下面只是个示例）
CSS

.center {
    white-space: nowrap;
    width: 100%;
    overflow-x: hidden;
}

.center label {
    float: left;
    width: 20%;
}

.center input {
    float: left;
    width: 30%;
}

HTML（将其中的空格去掉，空格会影响布局）

</style> <div  class="center">
    <label>门店名称</label>
    <input type="text" name="">
    <label>门店地址</label>
    <input type="text" name="">
</div>

效果：

当屏幕缩小的时候，第二个input输入框为什么会移到下一行，如何让他在一行显示，自动弹出滚动条？

一行显示，自动弹出滚动条

自动伸缩，不弹出滚动条

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

为什么会出现CORS error？