ホームページ > 記事 > ウェブフロントエンド > css 中央に不定数の送信ボタンを複数表示、純粋なcss solution_html/css_WEB-ITnose
css 中央に不定数の送信ボタンを複数表示、純粋なcss solution_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:37:221411ブラウズ
数日前、会社で 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を使用してそれを達成することもできます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。