要实现的效果:

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. 免费开源的代码审计工具 Gosec 入门使用

    声明: 本教程是在自己的电脑上本地测试Gosec的效果,所以不涉及其他运行模式,如果想要了解其他模式可以关注后期文档,如果想要自定义交流自定义代码扫描规则,可以跟我交流沟通. 背景: Gosec是一个 ...

  2. 小白搭建WNMP详细教程---PHP安装与设置

    php的安装请参考WAMP中PHP的安装教程https://www.cnblogs.com/missbye/p/12049925.html 需要注意的是,我们下载的PHP版本要下载Non Thread ...

  3. 关于base64编码Encode和Decode编码的几种方式--Java

    Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便.在实际应用上,Base64除了能将Binary资料可视化之外 ...

  4. 【LA 3487】Duopoly(图论--网络流最小割 经典题)

    题意:C公司有一些资源,每种只有1个,有A.B两个公司分别对其中一些资源进行分组竞标,每组竞标对一些资源出一个总价.问C公司的最大收益. 解法:最小割.将A公司的竞标与源点相连,B公司的与汇点相连,边 ...

  5. poj3260 The Fewest Coins

    Description Farmer John has gone to town to buy some farm supplies. Being a very efficient man, he a ...

  6. &#128218;C#/.NET/.NET Core推荐学习书籍(升职加薪,你值得拥有)

    前言: 作为一名程序员,我们无时无刻都要考虑着如何通过不断地学习来提升自己的核心竞争力.古人有云:"书中自有黄金屋,书中只有颜如玉",说明了书籍的重要性,没错工作多年来,发现身边那 ...

  7. spring再学习之整合JDBC

    一.JDBCTemplate JDBC模板 user类 package cn.itcast.bean; import java.util.Date; public class User { priva ...

  8. .NET Core项目自动化测试和代码覆盖率审查

    这篇文章给大家分享一下,如何配置.NET Core项目自动化测试和代码覆盖率审查. 基本知识,请参考这里: https://docs.microsoft.com/en-us/dotnet/core/t ...

  9. Python append() 与深拷贝、浅拷贝

    在leetcode77中,发现list.append的结果不对.原代码: class Solution: def combine(self, n: int, k: int) -> List[Li ...

  10. linux内核编程入门--系统调用监控文件访问

    参考的资料: hello world   https://www.cnblogs.com/bitor/p/9608725.html linux内核监控模块--系统调用的截获  https://www. ...