Rumah >hujung hadapan web >html tutorial >css 多个不定数量提交按钮居中显示，纯css解决_html/css_WEB-ITnose
css 多个不定数量提交按钮居中显示，纯css解决_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:37:221468semak imbas
前几天在公司修改一个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实现，其实完全没有必要
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：浏览器缓存分析_html/css_WEB-ITnoseArtikel seterusnya：闲聊CSS之关于clearfix清除浮动[转]_html/css_WEB-ITnose