zoukankan      html  css  js  c++  java
  • 微信小程序:如何实现两个按钮在最右侧并排

    要实现的效果:

     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{
                     150rpx;
                    float: right;
                  }
                }

    分析:

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

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

  • 相关阅读:
    课上练习,判断大小。
    软件工程个人作业03。
    构建之法阅读笔记一。
    软件工程个人作业02。
    SSM常见面试题
    Bean的作用域和初始化时机(singleton&prototype)
    Spring中的AOP
    Spring核心概念和打印机案例
    MyBatis中的常用注解
    MyBatis中的延迟加载策略
  • 原文地址:https://www.cnblogs.com/zwh0910/p/14091651.html
Copyright © 2011-2022 走看看