用CSS怎样实现布局button在左右对齐的效果？-群英

上一篇：用CSS怎样做垂直居中的效果？教你一个特别的方法下一篇：CSS3中box-shadow属性怎样使用?一文带你看懂

在很多网站页面上，我们都能看到两个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;
}

以上就是用CSS实现布局button在左右对齐的效果介绍，上述示例具有一定的借鉴价值，有需要的朋友可以参考学习，希望对大家学习CSS有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家