要实现的效果:

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. 2021 年写 JavaScript 代码的 17 个优化技巧

    我们经常会写一些 JavaScript 代码,但是如何写出干净又易维护的代码呢?本文将讲解 17 个 JavaScript 代码的技术帮助你提高编程水平,此外,本文可以帮助您为 2021 年的 Jav ...

  2. Eclipse配置MySQL连接工具

    1.项目名称右键新建文件夹lib 2.用鼠标将mysql-connector-java-5.1.15-bin.jar移动到lib文件夹中 3.选择Copy files点击OK 4.右键移动过来的mys ...

  3. Codeforces Round #666 (Div. 2)

    比赛链接:https://codeforces.com/contest/1397 A. Juggling Letters 题意 给出 $n$ 个字符串,可在字符串间任意移动字母,问最终能否使这 $n$ ...

  4. 【51nod1674】区间的价值 V2(算法效率--位运算合并优化+链表实现)

    题目链接:  51nod1674 题意:规定一个区间的价值为这个区间中所有数and起来的值与这个区间所有数or起来的值的乘积.现在l有一个 N 个数的序列,问所有n*(n+1)/2个区间的贡献的和对1 ...

  5. 南阳ccpc C题 The Battle of Chibi 树状数组+dp

    题目: Cao Cao made up a big army and was going to invade the whole South China. Yu Zhou was worried ab ...

  6. 2020 年百度之星·程序设计大赛 - 初赛一Dec 简单dp

    题意: Problem Description 初始有 a, ba,b 两个正整数,每次可以从中选一个大于 1 的数减 1,最后两个都会减到 1,我们想知道在过程中两个数互质的次数最多是多少. Inp ...

  7. C# 同步和异步(概念理解)

    C#  同步和异步 IO 概念区分 四个相关概念: 同步(Synchronous) 异步( Asynchronous) 阻塞( Blocking ) 非阻塞( Nonblocking) 同步异步图解 ...

  8. 实战交付一套dubbo微服务到k8s集群(3)之二进制安装Maven

    maven官网:https://maven.apache.org/ maven二进制下载连接:https://archive.apache.org/dist/maven/maven-3/3.6.1/b ...

  9. Leetcode(871)-最低加油次数

    汽车从起点出发驶向目的地,该目的地位于出发位置东面 target 英里处. 沿途有加油站,每个 station[i] 代表一个加油站,它位于出发位置东面 station[i][0] 英里处,并且有 s ...

  10. HDU 3065 病毒侵袭持续中(AC自动机 模板)题解

    题意:给出主串中每个模式串的个数 思路:毒瘤出题人多组数据没说给的是多组数据. 板子: struct Aho{ struct state{ int next[130]; int fail, cnt; ...