如何用jQuery Mobile实现按钮的内联位置:
- 使用
data-inline
属性
使用data-inline
属性可以将按钮放在同一行内,使用这个方法,可以控制按钮的宽度和高度。
示例代码:
<div data-role="page">
<div data-role="content">
<a href="#" data-role="button" data-inline="true">Button1</a>
<a href="#" data-role="button" data-inline="true">Button2</a>
</div>
</div>
- 使用Flexbox布局
使用Flexbox布局可以在同一行内水平排列多个按钮,而且可以轻松调整它们之间的间距和大小。
示例代码:
<div data-role="page">
<div data-role="content" class="button-container">
<a href="#" data-role="button">Button1</a>
<a href="#" data-role="button">Button2</a>
<a href="#" data-role="button">Button3</a>
</div>
</div>
.button-container {
display: flex;
justify-content: space-around;
}
以上就是用jQuery Mobile实现按钮内联位置的两种方法,希望可以帮助到您。