18

input 要素がインラインで定義されていない場合、または CSS スタイル ルールが関連付けられている場合、デフォルトの input 要素は size="20" です。

デフォルトを値の実際のサイズにするにはどうすればよいですか? 他の要素の場合:

<div style="display: inline; width: auto;">
    The box will only fit the width of it's content
</div>

width: auto で十分です。値が長くなる可能性があるため、幅を定義することはできません。例えば：

<input id="short" type="text" value="1000" />
<input id="long" type="text" value=" Areally long name is in this input field." />

#short のサイズを 1000 (基本的には size="4" + パディング) にしたいのですが、#long は必要なだけ長くしたいと考えています。これらの入力はプログラム的に入ってくるので、単純に短いクラスを短いクラスに、長いクラスを長いクラスに置くことはできません。私が置くことができれば、私は本当にそれが好きです：

input { width: auto; }

とにかくこれを行うには？

4

3 に答える 3

17

デフォルトの入力要素は size="20" です

この「デフォルト サイズ」は、ブラウザ、バージョン、および OS によって異なります。インライン スタイルでこれを行うことはできません。

最善の解決策は、合計が 100% になるように幅とパディングを設定することです

input {
  width: 98%;
  padding: 1%;
}

次に、絶対左右0に設定します

<fieldset>
    <input type="text" />
</fieldset>

最後にこのcssを追加します

<style type="text/css">
    fieldset {
      position: relative;
    }

    input {
        position: absolute;
        left: 0;
        right: 0;
    }
</style>
于 2012-08-07T12:40:45.670 に答える