お世話になります。 HTML・CSSについて質問です。 それぞれを文字とbackground-colorをつけて 同じサイズにしたいです。

お世話になります。 HTML・CSSについて質問です。 それぞれを文字とbackground-colorをつけて 同じサイズにしたいです。 文字数が異なっても、同じ幅にする方法はありますか? width: 50px; padding: 10px; box-sizing: border-box; で指定できると思ったのですができませんでした。 よろしくお願い致します。

画像

HTML、CSS7閲覧

ベストアンサー

0

msx********さん >・・・・文字数が異なっても、同じ幅・・・・・・・・・・・・・・・ ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> .box { display: inline-block; margin:2px; background: #09d; width: 100px;text-align:center; padding: 10px; box-sizing: border-box;} </style> </head> <body> <section> <div class="box"> A </div> <div class="box"> AB </div> <div class="box"> ABC </div> <div class="box"> ABCD </div> <div class="box"> ABCDE </div> </section> </body> </html>

その他の回答(1件)

0

PCの場合、現在4k画面が普及価格帯で販売されており、また(まだまだ高価ですが)8k画面も販売されているので、特定の解像度に依存しないページが推奨されます. 参考 Webページにおける基本的な注意点 http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/#Block_00000231 実際に「1K~4k」画面でチェックしてみれば、そのクズっぷりが解かると思います。 その解説をフルスペックで対応するのはハードルが高いので、とりあえず第1目標は特定の解像度に依存しないページを作成してみて下さい(第2目標はレスポンシブ・デザイン)。