Home >Web Front-end >HTML Tutorial >css 多个不定数量提交按钮居中显示，纯css解决_html/css_WEB-ITnose
css 多个不定数量提交按钮居中显示，纯css解决_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:221466browse
前几天在公司修改一个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实现，其实完全没有必要
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：浏览器缓存分析_html/css_WEB-ITnoseNext article：闲聊CSS之关于clearfix清除浮动[转]_html/css_WEB-ITnose