微信小程序开发：按钮输入框一行显示 - 代码实现与优化

扫码获取物品编号 点击查找 微信小程序开发代码实现按钮输入框调整到一行中，调整两个button和input大小宽度使其显示在一行中修改wxml.wxss代码内容：在wxml文件中，将按钮和输入框放在同一个flex布局的view中，并设置flex-direction为row，即可让它们在一行显示。

<view class="scan-barcode">
  <view class="input-container">
    <input class="mail-input" placeholder="或手动输入物品编号" bindinput="inputMailNumber" value="{{mailNumber}}"/>
    <button class="scan-btn" bindtap="scanBarcode">扫码获取物品编号</button>
    <button class="query-btn" bindtap="search">点击查找</button>
  </view>
</view>

在wxss文件中，设置输入框和按钮的宽度，使它们适应一行显示即可。

.scan-barcode {
  display: flex;
  justify-content: center;
}

.input-container {
  display: flex;
  align-items: center;
}

.mail-input {
  width: 50%;
}

.scan-btn,
.query-btn {
  width: 25%;
}

根据实际需求，你可以调整输入框和按钮的宽度比例，使它们在一行中合适地显示。