css 中央に不定数の送信ボタンを複数表示、純粋なcss solution_html/css

css 中央に不定数の送信ボタンを複数表示、純粋なcss solution_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:37:22

オリジナル

1441 人が閲覧しました

数日前、会社で CSS を変更したときに複数のボタンの中央揃えに関する問題が発生しました。実際、多くのフロントエンドプログラマーがこの問題に遭遇しています。たとえば、次のような問題があります。 2 つのボタンが連続しています...数は可変ですが、間隔は固定されており、多くの人はすべてのボタンを div に配置し、div をマージンに設定します: 10px auto (上から 10 ピクセル、中央揃え)。次に、固定幅を指定してボタンを配置します。この div では、ボタンを中央に配置することはできません)。ボタンが 2 つまたは 1 つに減らされた場合はどうなるでしょうか。

幅を動的に計算してから多くの計算を行うと、多くの場合、

エラーコード:

 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を使用してそれを達成することもできます。