WXML界面添加如下代码:
<view_class>
<button class="item auto" type="warn" size="mini" bindtap="default"> 开 </button>
<button class="item auto" type="warn" size="mini" bindtap="primary"> 关 </button>
<button class="item auto" type="warn" size="mini" bindtap="warn"> 写入 </button>
<button class="item auto" type="warn" size="mini" bindtap="aps"> 清除 </button></view_class>
WXSS界面添加如下代码:
.view_class {
display: flex;
flex-direction: row;
justify-content: center;
resize: horizontal;
overflow: hidden;
margin: 1em;
}
.item {
/* 上边 | 右边 | 下边 | 左边 */
margin: 20px 8px auto 1px;
padding: 0.3em;
width: 65px;
min-width: 0;
background-color: #1B5385;
color: white;
font-family: monospace;
font-size: 12px;
}
使用了Felx布局,要调整按键位置主要操控margin、width这几个属性
调整效果如下:
文章来源:https://www.toymoban.com/news/detail-754163.html
文章来源地址https://www.toymoban.com/news/detail-754163.html
到了这里,关于微信小程序如何让多个按钮横向排列的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!