web-dev-qa-db-ja.com

divのサイズを固定する方法は？

ボタンを30pxをクリックすると、div内のフォントが変更されるようにサイトを作成しました。

ulの中にボタンがあります。フォントのサイズを変更すると、divが展開され、ナビゲーションボタンも一緒に移動します。

どうすれば修正されたままになりますが、フォントは変更される可能性があります。

csshtmlfixed
36
Mike Collins

次のCSSを試してください。

#innerbox
{
   width:250px; /* or whatever width you want. */
   max-width:250px; /* or whatever width you want. */
   display: inline-block;
}

これにより、divのスペースは可能な限り少なくなり、その幅はcssによって定義されます。

//展開された回答

ボタンの幅を固定するには、次の手順を実行します。

#innerbox input
{
   width:150px; /* or whatever width you want. */
   max-width:150px; /* or whatever width you want. */
}

ただし、テキストのサイズが変化すると、表示に必要なスペースも変化することに注意してください。そのため、コンテナを拡張する必要があるのは当然です。おそらく、あなたがやろうとしていることを確認する必要があります。コンテンツの配置が完璧になるようにJavaScriptを使用してオンザフライで変更する定義済みのクラスがいくつかある場合があります。

53
Kami

.cssでmax-heightとmax-widthを指定できます

.fontpixel{max-width:200px; max-height:200px;}

高さと幅のプロパティに加えて

1
Mike

これがボタンの自然な動作です。親コンテナーにmax-width/max-heightを配置してみることもできますが、それでうまくいくかどうかはわかりません。

max-width:something px;
max-height:something px;

もう1つのオプションは、devloprツールを使用して、自然なパディングを削除できるかどうかを確認することです。

padding: 0;
0
Matt Steele