加入收藏 | 设为首页 | 会员中心 | 我要投稿 湘西站长网 (https://www.0743zz.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

用CSS如何实现布局button在左右对齐的效果?

发布时间:2022-01-07 08:41:06 所属栏目:语言 来源:互联网
导读:在很多网站页面上,我们都能看到两个button左右对齐的布局,这篇文章我们就来看看这是怎样做的,这里实现的是css布局两个button在同父标签中左右两侧分布的方法,感兴趣的朋友可以参考,实现效果及代码如下。 效果图 布局代码 view class=grace-footer style
   在很多网站页面上,我们都能看到两个button左右对齐的布局,这篇文章我们就来看看这是怎样做的,这里实现的是css布局两个button在同父标签中左右两侧分布的方法,感兴趣的朋友可以参考,实现效果及代码如下。
 
效果图
 
 
 
布局代码
 
<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)">提交</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;
}

(编辑:湘西站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读