问题描述：

同事学习开发vue的时候写了下面的代码，结果同样的代码在小程序中的现实和在网页中排版发生了不一致。我花了点时间找出了问题的根本原因。

代码：

   <view class="test">
        <input type="text" placeholder="sss" style="width: 100px;">ss</input>
        <input type="text" placeholder="sss" style="width: 100px;">ss</input>
        <input type="text" placeholder="sss" style="width: 100px;">ss</input>
    </view>

 <div class="hello">
    <input type="text"><input type="text"><input type="text">
  </div>

问题现象展示：

一个布局是横排，一个是纵排，what？？？？

• 小程序
• 
• 网页

溯源找原因

同事问了gpt 给的答案。

然而这个答案还是没有说出更加具体的问题来，所以继续深挖，通过调试工具来细细查找。
默认情况下view 的display 是block，div 的display 也是block一样啊，这就奇怪了

view 和 div 的子元素是三个input ， 一看input 就找到问题的所在。在小程序中的input 默认的样式是block 的，然后在div中的是inline-block 的所以inline-block的块级元素是根据宽高来布局的，页面宽度够的情况下就会横排在一起。如果想变成纵排那么直接给input 的display设置为block，这样就能和小程序中是一致的了。

好了，完美解决，加鸡腿！