html - CSS の最大最小幅

Question

次の入力ボックスがあります。

ここに画像の説明を入力

幅を縮小してインラインに配置すると、フルサイズのウィンドウで見栄えがよくなりますが、画面を狭くすると問題が発生します。

狭い画面をやっていると本当に見栄えが悪いです。

一見-

ここに画像の説明を入力

これらの入力ボックスを試して、セットアップで新しい行を取得しましたmax-width。

コード内-

入力を次のように使用しています-

価格についてバット-

  <input type="text" style="width:85%;max-width:85%;" id="Order" maxlength = "10" name="PriceExVat"   onkeypress="validate(event)"/>

ただし、狭い画面を実行している間は改行されません。

これらの入力ブロックに、この望ましいレスポンシブレイアウトが必要です。

ここに画像の説明を入力

score 7 · Accepted Answer

メディアクエリを実行し、それらをブロック要素にします -

@media all and (max-width: 500px) and (min-width: 0px) {
 input[type="text"] {
  display:block;
 }
}

score 0 · Accepted Answer

display: inline;これを試してみるとdisplay: inline-block;、問題が解決する可能性があります。

score 0 · Accepted Answer

あなたはほとんどそこにいます。min-width特定の幅の後に要素が縮小するのを防ぐために使用する必要があります。

コード内をに置き換えmax-widthて、再試行してください。また、全画面表示時にテキストボックスが 85% の幅を占有しないようmin-widthに指定することもできます。max-width: nPixels px;

3 に答える 3