JQuery-Mobile学习笔记：内联按钮 data-inline=true

最新推荐文章于 2025-05-28 22:24:08 发布
最新推荐文章于 2025-05-28 22:24:08 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_7971/article/details/82608508
本文探讨了如何通过添加特定属性使按钮在网页中实现紧凑布局，优化用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

默认情况下，在体内含量的所有按钮都称为块级元素，所以他们填补了屏幕的宽度。

但是，如果你想让按钮外观紧凑，宽度只符合里面的文字和icon，那就给按钮添加data-inline="true"的属性。

iteye_7971
关注
综合一
刘群智的博客
07-27 4392
自我介绍 左固定右自适应布局 这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局： <div id="outer">   <div id="sidebar" style="height:240px;">固定宽度区</div>   <d
JQuery Mobile入门——内联按钮
liang408015204的专栏
01-10 4259
1、JQuery Mobile中的按钮由两类元素组成，一类是元素，将该元素的data-role属性值设置为button；另一类是，无需在表单内添加data-role属性，只要将type属性值设置为submit、reset、button或image。 2、示例代码：     New Document                  头部栏
eleme后台的el-form表单分为左右两边放数据 :inline="true"
热门推荐
ljw_jiawei的博客
06-07 3万+
<el-form :model="editForm" label-width="160px" :rules="editFormRules" ref="editForm" :inline="true" class="demo-form-inline"> </el-form>
vue 学习之路1
sky_sunshine_x的博客
08-01 1718
1.表单的 :inline属性（boolean）,默认为false； 1) :inline="true"时（横向显示），样式如下： 2) :inline="false"时（纵向显示），样式如下： 2.表单的model属性，表单数据对象，用于数据的双向绑定； <el-form :inline="true" :model="listQuery" size="sma...
Vue学习01
我的博客
04-20 705
v-cloak 插值表达式闪烁问题解决 [v-cloak]{ display: none; } <div id="app" v-cloak></div> v-text <p>选择的项是：{{ selected }}</p> <p v-text="selected"></p> <!--v-text无...
element form表单的必填和重置事件不生效的问题
wjw0125的博客
12-02 1043
element表单在使用的时候可以配置验证规则 必填选项和事件重置 但是很多人都会忽略form表单使用的时候的细节用法 从而导致某些功能实现不了 其实就是表单项要有一个prop属性 例如 <el-form :inline="true" ref="resetForm" :model="student" class="demo-form-inline"> <el-form-item label="名称"> <el-input v-model="s
jQuery-Mobile 学习笔记（1）
weixin_43749999的博客
05-25 881
移动web开发学习笔记（1） 日期：2021/5/25 下午15：18开始 重点： jQuery-mobile开发学习： 在使用之前需要在<head>标签中引入： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewpor 引入： <link rel=s.
jQuery Mobile 所有data-*选项，开发全解+完美注释
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-05 4704
jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项jQuery Mobile 所有data-*选项：data-role="none" //避免jquery自动为元素添加样式按钮：//在1.4 版本以后已废弃。使用 CSS 类 替代。带有 data-role="button" 的超链接。button 元素、工具栏中
vue中form表单动态添加行
丁哒哒的博客
10-24 4363
实现效果： 代码： <el-row v-for="(item, index) in ruleForms.items"> <el-form :inline="true" :model="ruleForms.items[index]" :rules="rules" ref="ruleForms" ...
element form inline属性bug
呵呵，到处看看
06-30 4954
element form inline属性bug element-ui 中 form 中 设置 inline 属性为 true 后会出现因设备分辨率改变，form 换行的bug 原因分析 图例 总结 出现 form 换行原因是由于： inline 属性给 form 设置了width：auto的样式， 这会导致form按百分比缩放 同时 form中 input 组件样式中存在 width：100%的设定 这使得 input width 会自动与外层的div width 保持一致 ...
ELEMENTUI_基础知识
所得皆惊喜
06-29 1566
①. 页面布局el-container 1>.页面布局el-container ①. 效果图如下:
:inline=“true“会发生什么
最新发布
u014642921的博客
05-28 257
关于inline的用法
anshansui2885的博客
07-13 188
C++中引入了关键字inline，我们称之为内联函数； 内联函数的作用体现在对于频繁调用的小函数上，太长代码的函数显然不适合声明为内联函数，这无疑会加大内存的消耗。 eg： #include <stdio.h> //define inline inline bool isValueValid(int value) { retur...
Vue 表单布局
code12313的博客
08-27 2007
Vue代码 <el-form :inline="true" class="demo-form-inline"> <el-row :gutter="20" type="flex" justify="space-between"> <el-col :span="12" style="background-color: coral;"> <el-form-item label="姓名"> .
深入理解内联inline函数的优缺点，性能及使用指南
铁匠Smith先生的专栏
01-12 1万+
Inline function is the optimization technique used by the compilers. One can simply prepend inline keyword to function prototype to make a function inline. Inline function instruct compiler to insert
[转]css中display:inline-block
weixin_30922589的博客
08-04 250
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。display:inline-block简单来说就是将对象呈递为内联对象，但是对...
Jquery mobile按钮的三种创建方式及使用条件
不负此生
12-09 1237
1.用于页面之间的跳转 <a href="#" data-role="submit" data-inline="true">按钮显示的内容 a.其中包含一个data-inline元素，用于自适应其按钮内容大小或者需要两个或多个按钮并排显示,需要使用时设置为true,否则将占据整行 b.使用该方式创建按钮时，可以使用data-transition元素,例如: 转到页面一 c.使用该方式创
Jquery Mobile文字和UI 组件如何同时居中（前端UI）？
igeminisky的专栏
11-29 5071
Jquery Mobile文字和UI 组件如何同时居中？关键点就是Table的应用！不要鄙视它(⊙o⊙)，有时候还是很好用的哦···有图有真相
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值