首先我使用了fieldcontain属性：
| 代码如下 | 复制代码 |
|
<form method="post" action=""> <div data-role="fieldcontain"> <label for="fullname">客姓www.111cn.net</label> <input type="text" name="fullname" id="fullname"> </div> </form> |
|
这个属性成功的让lable和input显示在同一行，然而高兴的太早了，问题接着来了，因为在pc浏览器正常大小下虽然没问题，但考虑到移动设备浏览窗口并没有那么大，测试时发现当屏幕尺寸小于480px时lable和input又会分居两行。然而移动设备的屏幕尺寸并不止于480px,虽然移动设备向着大屏进军，但仍然有128px、320px的。所以得找到新的解决办法。
使用fieldcontain后屏幕大于480px时正常显示
使用fieldcontain后屏幕小于480px时lable和input仍然在两行
我发现也有好多人遇到同样的问题，但都没有解决，看到一位朋友给出的办法是自定义css样式
@media (max-width: 480px)
但我测试过后并没有达到预期目的，不知道这个方法正确否，可能我的发法不对，大家可以自行测试~
国内的论坛没找到更多方法，同学告诉我看看国外社区，于是转战谷歌搜索，发现了很多新的方法，虽然大多不能用，但国外的回答度远高于国内，所以以后转战于国外技术社区。
找到的解决办法是用table。
label in a td and input in a td，这就可以让jquery mobile的lable和input在屏幕小于480px时能显示在同一行的办法，lable放一行，input放一行。
| 代码如下 | 复制代码 |
|
<form method="post" action=""> <div data-role="fieldcontain"> <table> <tr> <td> <label for="fullname">客姓</label> </td> <td> <input type="text" name="fullname" id="fullname"> </td> </tr> </table> </div> </form> |
|
时间： 2024-11-30 14:37:57