css布局两个button在同父标签中左右两侧分布的方

编辑: admin 分类: css 发布时间: 2022-01-18 来源:互联网

本文主要介绍了css布局两个button在同父标签中左右两侧分布的方法,分享给大家,具体如下:

效果图

布局代码

<view class="grace-footer" style="width:100%;" slot=&q【转自:http://www.1234xp.com/xggf.html 欢迎转载】uot;gFooter">
 <view style="float:right;width:50%">
    <button type="primary" style="line-height: 85rpx; margin: 25rpx; "  @click="saveService(scanKay,tableList)">提交</button> 
 </view>
 <view style="float:left;width:50%">
  <button type="warn" style="line-height: 85rpx; margin: 25rpx;"  @click="removeService()">重置</button>
 </view>
   
</view>

style="float:right;width:50%"
就是在父标签容器中的右侧,并且占据50%宽度

style="float:left;width:50%"
就是在父标签容器中的左侧侧,并且占据50%宽度

grace-footer是GraceUI 引入的css代码是 效果是底部导航

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

到此这篇关于css布局两个button在同父标签中左右两侧分布的方法的文章就介绍到这了,更多相关css两个button同父标签左右两侧分布内容请搜索海外IDC网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持海外IDC网!

【文章原创作者:十堰网站优化 请说明出处】