PHPIN.NET

 找回密码
 立即注册
查看: 5177|回复: 0

[新手入门] 对于多个按钮布局,display:inline-block用法

[复制链接]

469

主题

31

回帖

5569

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5569
发表于 2014-3-6 14:43:12 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
一直以来,碰到如图的按钮布局,都是直接用浮动来做,就算知道display:inline-block也可以实现效果,但就是不想,觉得应该整理出来,后面多用。
实例.jpg

贴一下代码:
  1. <style>
  2. .m-btn{border:1px solid #8c8c8c;background:#fff;width: 230px;margin:100px auto 0;font-family: "Microsoft YaHei";padding:20px;text-align:center;}
  3. .btn-click{color:#ffffff;font-weight:bold;display:inline-block;background-color: #fc6826;border: 1px solid #ea4e14;width: 80px;height: 24px;line-height: 24px; font-size: 14px;text-align:center;text-decoration: none;margin-right: 10px;}
  4. .btn-click:hover{color:#f6d275;text-decoration: none;}
  5. </style>
  6. <div class="m-btn">
  7. <a href="#" class="btn-click">确定</a>
  8. <a href="#" class="btn-click">取消</a>
  9. </div>
复制代码



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-11-21 20:59

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表