要实现的效果:

wxml端代码:


<view  class="prepare_param">
                        <view class="prepare_confirm1">
                            <button size="mini" type="primary" bindtap="deleteById" data-id="{{item.id}}">作废</button>
                        </view>
                        <navigator class="prepare_confirm2"  url="/pages/prepare_addAndEdit/index?prepare_id={{item.id}}&supplyId={{item.supplyId}}">
                            <button size="mini" type="primary">修改</button>
                        </navigator>
                    </view>

样式代码

.prepare_param {
.prepare_confirm1{
padding-left: 350rpx;
} .prepare_confirm2{
width: 150rpx;
float: right;
}
}

分析:

将一个div分成两部分,将右侧的按钮的宽度设置成略大于按钮本身的宽度,并让整个div移动到最右端。剩余的宽度为左侧按钮所在div的总宽度,此时设置padding-left的宽度,实现

让左侧按钮无限接近右侧按钮

微信小程序:如何实现两个按钮在最右侧并排的更多相关文章

  1. 微信小程序picker组件两列关联使用方式

    在使用微信小程序picker组件时候,可以设置属性   mode = multiSelector   意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...

  2. 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)

    (一)单选按钮组 模型图如下: index.js Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ i ...

  3. 微信小程序一个页面多个按钮分享怎么处理

    首先呢,第一步先看api文档: 组件:button https://developers.weixin.qq.com/miniprogram/dev/component/button.html 框架- ...

  4. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  5. 关于微信小程序的一些总结

    mpvue? {{}} 在vue和小程序中的区别? 01 小程序中{{}}和vue中的{{}}用法基本一致,可以显示data中的数据,可以写表达式 不一样的地方? 01 小程序的{{}}可以写在属性中 ...

  6. 微信小程序之onLaunch与onload异步问题

    所述问题: 前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过wx.login({}) 这个api进行用户登录,获取系统后台的用户基本信息.再此之前,一直以为微信小程序中的 ...

  7. 微信小程序 View:flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  8. 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序

    1.前言 2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间.连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而只有在原生的 APP 上才能保 ...

  9. 微信小程序—setTimeOut定时器的坑

    原文地址: http://fanjiajia.cn/2018/06/27/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E2%80%94setTimeOu ...

随机推荐

  1. 答疑解惑之ExecutorService——shutdown方法和awaitTermination方法使用

    ExecutorService的关闭 shutdown和awaitTermination为接口ExecutorService定义的两个方法,一般情况配合使用来关闭线程池. shutdownnow和它的 ...

  2. Codeforces Round #626 Div2 D. Present(位掩码,二分)

    题目链接:https://codeforces.com/contest/1323/problem/D 题意:给了大小为4e5的数组a,其中1<=ai<=1e7.求所有点对和的异或和,即: ...

  3. Codeforces Round #656 (Div. 3) C. Make It Good

    题目链接:https://codeforces.com/contest/1385/problem/C 题意 去除一个数组的最短前缀使得余下的数组每次从首或尾部取元素可以排为非减序. 题解一 当两个大数 ...

  4. Codeforces Round #533 (Div. 2) A. Salem and Sticks(枚举)

    #include <bits/stdc++.h> using namespace std; int main() { int n;cin>>n; int a[n];for(in ...

  5. Codeforces Testing Round #16 C.Skier

    题意: 一个人在雪地上滑雪,每次可以向上下左右四个方向移动一个单位,如果这条路径没有被访问过,则需要5秒的时间,如果被访问过,则需要1秒(注意:判断的是两点之间的距离,不是单纯的点).给你他的行动轨迹 ...

  6. 国产网络测试仪MiniSMB - 如何3秒内创建出16,000条IP递增流

    国产网络测试仪MiniSMB(www.minismb.com)是复刻smartbits的IP网络性能测试工具,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太 ...

  7. TextCNN论文解读

    引言 本文是对<Convolutional Neural Networks for Sentence Classification>的原理解读,简称TextCNN. 作者提出了一种基于CN ...

  8. K8S(14)监控实战-grafana出图_alert告警

    k8s监控实战-grafana出图_alert告警 目录 k8s监控实战-grafana出图_alert告警 1 使用炫酷的grafana出图 1.1 部署grafana 1.1.1 准备镜像 1.1 ...

  9. 牛客网多校第9场 E Music Game 【思维+数学期望】

    题目:戳这里 题意:鼠标点击n下,第i次点击成功的概率为p[i],连续点击成功x次可以获得x^m分,求n次点击总分数的数学期望. 解题思路:数学期望的题很多都需要转化思维,求某一个单独状态对整体答案的 ...

  10. 2017CCCC决赛 L1-3. 阅览室

    L1-3 阅览室(20 分) 天梯图书阅览室请你编写一个简单的图书借阅统计程序.当读者借书时,管理员输入书号并按下S键,程序开始计时:当读者还书时,管理员输入书号并按下E键,程序结束计时.书号为不超过 ...