小程序开发 picker 和button怎么放在同一行?
<picker mode="date" value="{{date}}" start="{{datestart}}" end="{{dateend}}" bindchange="bindDateChange">
<view class="picker">
通行日期:{{dates}}
</view>
<button class="mini-btn" type="primary" size="mini" bindtap="chaxuntongxing">查询</button>
</picker>
这样子会变成两行,怎么让picker 和button 在同一行
<picker mode="date" value="{{date}}" start="{{datestart}}" end="{{dateend}}" bindchange="bindDateChange"> <view class="box"> <view class="picker"> 通行日期:{{dates}} </view> <button class="mini-btn" type="primary" size="mini" bindtap="chaxuntongxing">查询</button> </view> </picker> .box{ display: flex; flex-direction: row; align-items: center; }
加个容器,再写css
用css去控制,代码示例,试试吧
<view class="container"> <picker mode="date" value="{{date}}" start="{{datestart}}" end="{{dateend}}" bindchange="bindDateChange"> <view class="picker"> <text>通行日期</text> </view> </picker> <button type="primary" size="mini">查询</button> </view> .container { display: flex; flex-direction: row; align-items: center; }
view是块级元素,独占一行,所以后面的button会另起一行显示