BinaryDevelop
  1. ホーム
  2. css

[解決済み] width:auto for <input> fields

2022-05-14 11:35:30

Question

Newbie CSS question. I thought width:auto for a display:block element meant 'fill available space'. However for an <input> element this doesn't seem to be the case. For example: 

<body>
  <form style='background:red'>
    <input type='text' style='background:green; display:block; width:auto'>
  </form>
</body>

Two questions then:

  1. Is there a definition of exactly what width:auto does mean? The CSS spec seems vague to me, but maybe I missed the relevant section.

  2. 入力フィールドに期待する動作、つまり他のブロックレベル要素のように利用可能なスペースを埋めることを実現する方法はありますか？

ありがとうございます。

解決方法は？

について <input> の幅は、その size 属性があります。 デフォルトの size は、自動幅を駆動するものです。

試しに width:100% 以下の例のように。

幅を埋めない。 

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

幅を埋める。 

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

サイズが小さい、幅が小さい 

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

アップデイト

数分後にできたベストがこれです。 FF、Chrome、Safariでは1pxずれていますが、IEでは完璧です(問題は#^&* IEはボーダーの適用が他の人と違うので一貫性がないことです)。 

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します