猿问

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

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

https://img1.mukewang.com/5c2dbf2b0001ce1b03940094.jpg

 <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>


红糖糍粑
浏览 921回答 1
1回答

叮当猫咪

第一个问题：<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>问题</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; @media only screen and (min-width: 100px) and (max-width: 550px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .center {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 500%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div class="center">&nbsp; &nbsp; &nbsp; &nbsp; <label>门店名称</label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <label>门店地址</label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="">&nbsp; &nbsp; </div></body></html>第二个问题：<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>问题</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; input {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-right: 30px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media only screen and (min-width: 510px) and (max-width: 550px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 140px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media only screen and (min-width: 488px) and (max-width: 510px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 130px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media only screen and (min-width: 448px) and (max-width: 488px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 110px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media only screen and (min-width: 408px) and (max-width: 448px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 90px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media only screen and (min-width: 388px) and (max-width: 408px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 80px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media only screen and (min-width: 100px) and (max-width: 388px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div class="center">&nbsp; &nbsp; &nbsp; &nbsp; <label>门店名称</label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <label>门店地址</label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="">&nbsp; &nbsp; </div></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答