How to distribute two buttons on the left and right sides of the same parent tag using CSS

This article mainly introduces the method of CSS layout of two buttons on the left and right sides of the same parent tag, and shares it with you. The details are as follows:

Rendering

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 is on the right side of the parent label container and occupies 50% of the width

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

grace-footer is the CSS code introduced by GraceUI. Its effect 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;
}

This is the end of this article about the CSS layout method of distributing two buttons on the left and right sides of the same parent tag. For more related CSS two buttons on the left and right sides of the same parent tag, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!