CSS layout two buttons in the same parent label on the left and right sides of the distribution method

Time:2021-2-22

This paper mainly introduces the method of CSS layout of two buttons on the left and right sides of the same parent tag, which is shared with you as follows:

design sketch

Layout code

<view class="grace-footer" style="width:100%;" slot="gFooter">
 <view style="float:right;width:50%">
    < button type = "primary" style = "line height: 85rpx; margin: 25rpx; @ Click =" saveservice (scankay, tablelist) "> submit < / button > 
 </view>
 <view style="float:left;width:50%">
  < button type = "warn" style = "line height: 85rpx; margin: 25rpx; @ Click =" removeservice() "> Reset < / button >
 </view>
   
</view>

style="float:right;width:50%"
It’s on the right side of the parent label container and occupies 50% of the width

style="float:left;width:50%"It’s on the left side of the parent label container and occupies 50% of the width

Grace footer is the CSS introduced by grace UI, and the code is the bottom navigation


.grace-footer{
     position:fixed; 
     z-index:2; left:0; 
     bottom:0; 
     background:#FFFFFF; 
     width:750rpx; 
     overflow:hidden; 
     box-shadow:1px 1px 6px #888;
}

So far, this article about the method of CSS layout of two buttons on the left and right sides of the same parent tag is introduced here. For more related content of CSS layout of two buttons on the left and right sides of the same parent tag, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!