星空网 > 软件开发 > 网页设计

css 多个不定数量提交按钮居中显示,纯css解决

前几天在公司修改一个css 多个按钮居中问题,其实这样的问题很多前端程序员都遇到过,举个例子吧:

在一行中有三个按钮或是两个按钮...个数不定,然后间距固定;然后就有很多人把所有按钮放到一个div中,把div置为margin:10px auto(距上10像素,居中,然后又给了一个固定宽度,按钮放在这个div中,这样按钮就不能具体居中了) ,也不通用如果按钮减少到两个 或一个怎么办,

也有很多人用javascript 动态的算出宽度然后计算一大堆,并且很多时候比好用

错误代码:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <meta charset="utf-8"> 5   <title></title> 6   <style type="text/css"> 7   .foot{width: 100%; height: 30px; border: 1px solid #d2d2d2;} 8   .foot .b{width:300px; margin: 3px auto;} 9   .foot .b .button{display: inline-block;line-height: 20px; background-color: #900; padding: 3px 5px; margin-left: 10px;}10   </style>11 </head>12 <body>13 <div class="foot">14   <div class="b">15     <a href="" class="button">提交</a>16     <a href="" class="button">提交</a>17     <a href="" class="button">提交</a>18   </div>19 </div>20 </body>21 </html>

 

后来修改如下

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title></title>  <style type="text/css">  .foot{width: 100%; height: 30px; border: 1px solid #d2d2d2; text-align: center;}  .foot ul{display: inline; margin-left: -10px;}  .foot ul li{display: inline-block; margin-left: 10px; line-height: 30px;}  .foot ul li a{background-color: #900; color: #fff;line-height: 20px;padding: 3px 5px;}  </style></head><body><div class="foot">  <ul>    <li><a href="" class="button">提交</a></li>    <li><a href="" class="button">提交</a></li>    <li><a href="" class="button">提交</a></li>    <li><a href="" class="button">提交</a></li>  </ul>  </div></div></body></html>

其实这些问题看上去很简单,单还是有很多初学者不能实现,很多人也行用javascript实现,其实完全没有必要

 




原标题:css 多个不定数量提交按钮居中显示,纯css解决

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Temu在英国被指销售违规品类,已删除下架:https://www.kjdsnews.com/a/1667445.html
亚马逊墨西哥启动大规模招聘,全力备战Buen Fin大促:https://www.kjdsnews.com/a/1667446.html
从“全国卖”到“全球卖”,卖家借道SHEIN冲刺黑五!:https://www.kjdsnews.com/a/1667447.html
日本家具批发老大SEKI开启定制型网站:https://www.kjdsnews.com/a/1667448.html
东南亚情报局|大促增长超10倍!手机配件高潜力市场爆火:https://www.kjdsnews.com/a/1667449.html
10个问答解析亚马逊广告竞价的底层逻辑1.0:https://www.kjdsnews.com/a/1667450.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流