首页 > 其他 > 详细

按钮居中

时间:2016-04-06 13:26:39      阅读:374      评论:0      收藏:0      [点我收藏+]

  近期做移动端项目,某一个页面内每个模块都有按钮,按钮大小一样,离底部距离一样,于是写了公共样式,在这里遇到个问题——居中,因为有时候是2个按钮,有时候是一个,整体宽度不一致,于是用了最基本的方法,给最外层position:fixed;bottom:20px;left:50%;margin-left:-容器宽度的一半。这样问题是解决了,但是不怎么灵活,宽度改变了我的margin-left值就要变,很繁琐。

  后来经尝试+朋友指点,终于得以解决,具体如下:

  HTML代码:

1 <div class="ui_Btn">
2     <div>跳过</div>
3     <div>配置wifi</div>
4 </div>

  CSS代码:

 .ui_Btn {width: 100%;text-align: center;position: fixed;bottom: 10%;left:0;}
 .ui_Btn div {width: 120px;height: 40px;line-height: 40px;text-align: center;border-radius: 10px;
        display: inline-block;border: 1px solid #26AD60; background: #26AD60;color: #fff;}

  

这个方式针对固定在底部的按钮比较适用,如果是文档中的按钮,取消position,bottom,left即可。只是其中的道理还不明白,望各路大神指点。

 

按钮居中

原文:http://www.cnblogs.com/AliceLiu/p/5358613.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!