css 多個不定數量提交按鈕居中顯示，純css解決

時間 2019-11-13

標籤 css 多個不定數量提交按鈕居中顯示解決欄目 CSS 简体版

原文原文鏈接

前幾天在公司修改一個css 多個按鈕居中問題，其實這樣的問題不少前端程序員都遇到過，舉個例子吧：javascript

在一行中有三個按鈕或是兩個按鈕...個數不定，而後間距固定；而後就有不少人把全部按鈕放到一個div中，把div置爲margin:10px auto(距上10像素，居中，而後又給了一個固定寬度，按鈕放在這個div中，這樣按鈕就不能具體居中了) ，也不通用若是按鈕減小到兩個或一個怎麼辦，css

也有不少人用javascript 動態的算出寬度而後計算一大堆，而且不少時候比好用html

錯誤代碼：前端

 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>

後來修改以下java

<!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>