jquerymobile下label和input输入框小屏幕不在同一行显示

最新推荐文章于 2022-10-27 15:24:45 发布
最新推荐文章于 2022-10-27 15:24:45 发布
阅读量1.1w 收藏 2
点赞数
分类专栏： webapp 前端 jquery mobile 文章标签： jquery mobile label javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jackdowson123/article/details/24122029
版权
博客探讨了在jQuery Mobile中，label和input输入框在小屏幕上显示为不同行的问题，并提供了解决方案。作者展示了修改前后的效果，并寻求关于这个问题的原理解释。
摘要由CSDN通过智能技术生成
这几天在学jqm，遇到这问题百度了好久，google到了国外的技术论坛都找不到合适的答案，有的人说是改 自定义css样式  @media  (max-width: 480px) ，但是我试了却没用，还有的说是改label的宽度，我改了没用。最后偶然发现去掉 
<div data-role="page" data-fullscreen="true">
中的 
data-fullscreen="true"

就可以了。去掉之前的效果图

最低0.47元/天 解锁文章
Chrisdowson
关注
专栏目录
jQuery技术下实现input元素输入框宽度大小自动调整的两种方式
欢迎大家交流前端开发技术、经验及各种知识沉淀
08-30 2766
input输入框宽度大小自动调整有两种方式，一种是：先获取input的文本内容，然后创建预格式化的文本pre标签元素，将获取的文本内容放到pre元素里，再获取pre元素的宽度，根据获取的pre元素的宽度，进而改变input输入框的宽度，另一种是：input输入框的宽度也可以根据输入文本的字符串的长度乘以文本字体大小来实现自动调整......
jquery mobile插件lable和input不显示在一行
一个菜鸟的学习之路
01-18 2823
jquery mobile做一个webapp，期间遇到了一个问题，就是lable和input不显示在同一行。 因为通常lable和input默认各占一行，所以需要寻找解决的办法。 首先我使用了fieldcontain属性： 代码如下             客姓www.111cn.net             这个属性成功的让lable和input显示在同一
jquery mobile 文本框与按钮放在同一行
GuTiDong的博客
01-16 3480
<div class="ui-grid-a"> <div class="ui-block-a"> <input name="search" id="search" type="text"/> </div> <div class="ui-block-b"> <a hr...
label文字 与input 不在一条直线上解决方案
Fly的博客
05-22 9216
label文字 与input 不在一条直线上解决方案1.html&lt;div&gt; &lt;input class="form-input" type="checkbox" /&gt; &lt;label&gt;全选&lt;/label&gt; &lt;/div&gt;2.css.form-input { float: left; }效果：...
解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题...
weixin_30947043的博客
03-21 2187
注册表单部分代码如下： 1 <form id="registForm" class="form-horizontal" action="${pageContext.request.contextPath }/register" method="post" style="margin-top: 5px;"> 2 <div ...
html 输入框自动缩短 一行内显示,JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）...
weixin_42447681的博客
05-31 237
JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用，最近一个项目正好用到，仔细研究了下组合框(combobox)的自动补全部分，官方地址是：https://jqueryui.com/autocomplete/#combobox。官方的功能需要一个额外下拉按钮才能显示全部option选项，有些画蛇添足。我的需求是，只要点击输入框，就要显示全部的option选项...
jquery mobile 完成登录、修改、注册界面设计
06-17
在本文中，我们将深入探讨如何使用jQuery Mobile来创建功能丰富的登录、修改和注册界面，以满足你的期末大作业需求。jQuery Mobile是一个强大的前端框架，它为HTML5开发提供了丰富的交互性和移动设备兼容性，使...
jquery mobile中，如何设置文本输入框大小
最新发布
06-07
在 jQuery Mobile 中，可以通过设置 `data-mini="true"` 属性来让输入框变小。同时，也可以通过 CSS 来设置输入框的大小。 例如，可以使用以下 CSS 代码来设置输入框的宽度和高度： ```css .ui-input-text { ...
jQuery Mobile框架中的表单组件基础使用教程
11-23
在移动应用和网页开发中，jQuery Mobile是一个强大的前端框架，尤其在创建触控友好的界面时表现出色。本教程将重点介绍jQuery Mobile中的表单组件，这些组件是基于HTML的，但通过jQuery Mobile的样式增强，使它们在...
jQuery Mobile中的输入框
10-09 2596
在基于HTML5 的 jQuery Mobile 框架中，常用的输入框列表如下。 名称 Type 功能 文本输入框 text 传统输入框，实现文本输入 密码输入框 password 输入密码的输入框，相当于的功能 数字输入框 number 能够输入数字的输入框。与html4不同之处在于，可以通过微调按钮的样式进行上下调整 电子邮
有关jQuery Mobile中的按钮操作
YYxiaobao0726的博客
05-05 380
在 jQuery Mobile 中创建按钮 jQuery Mobile中的按钮可通过三种方法创建： 使用 < button > 元素            < button >按钮< /button > 使用 < input > ...
input元素和display:inline-block的元素不在一行的解决办法
weixin_33811961的博客
06-01 550
每次用到了<input/> 元素 和inline-block的<span></span>（不一定是span，其他一些inline的元素也是一样）元素，他们总是会不在一个水平线上，这个时候就很蛋疼了，毕竟不在水平线上，很不美观。 有以下解决办法： 对于input和span都用浮动，这样就是平齐的，但是记得在外面清除浮动，避免对其他元素造成影响 　　...
解决label和input在一行放不下时同时换行的问题
baidu_39068138的博客
09-17 9412
解决label和input在一行放不下时同时换行的问题 上问题： 可以看到我们以图中红色框框起来的为一组，当前的状态的各自安好的，但好景不长，对于一些国际化的项目必须去适配多语言的系统，就导致会出现筛选项的名字长度无法确定在固定的范围，从而导致如下图的情况： 可以看到我们的问题就来了，黄色的区域的内容原本应该是成对存在的，在一行无法放下的时候最好的解决方法是两个一起到下一行（在要求label必须全部展示完整名字的情况下） 那么如何解决呢：我们可以看到原先的代码例如Bootstrap ..
【jquery mobile笔记一】data-role="fieldcontain"
北一
08-03 9263
data-role="fieldcontain"使用在布局中，一般使用方法如下        label          如果屏幕足够宽，label和input会在一行上显示，如果屏幕不够宽，则会上下显示，lable在上，input在下。如下2图。 需要注意的是，当在一行上显示时，第一个元素会居左，第二个元素会居右，以此来更好的适应屏幕的宽度。
jq给输入框设置初始值
dandelionoooo的博客
09-25 2442
给input输入框设置一个id，再用$("#xxx").val(1);即可。
解决el-form的label和el-input不在同一行问题
m0_46544598的博客
10-27 3291
解决el-form的label和el-input不在同一行问题
jquery如何清空一个input输入框的内容
05-24
可以使用以下代码： ```javascript $("#inputId").val(""); ``` 其中，`#inputId` 是你要清空内容的 input 元素的 ID。通过设置该元素的 `val()` 方法为一个空字符串，就可以清空输入框的内容。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值