<input>フィールドのwidth：auto

122

初心者向けのCSS質問。「利用可能なスペースを埋める」width:autoというdisplay:block要素を考えました。ただし、<input>要素の場合はそうではないようです。例えば：

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

次に2つの質問：

width：autoが意味する正確な定義はありますか？CSSの仕様は曖昧に思えますが、関連するセクションを見逃したのかもしれません。
入力フィールドに対して期待される動作を実現する方法はありますか。他のブロックレベル要素のように利用可能なスペースを埋めますか？

ありがとう！

css

— リッチ
ソース

display：block

— Phrogz、2011年

@Phrogzはい、それは複製です。検索しましたが見つかりませんでした。どうも。

— richb

88

アン<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>

— ベン
ソース

24

ありがとう。幅：100％は同じではありません。マージンまたは境界がある場合、親ボックスからはみ出します。

— richb

1

これらを明示的に設定して、必要に応じて調整できますborder:2px inset #eee; margin:-2px。自分でテストしたわけではありませんが、それらの線に沿ったものです。

— Ben

3

スティーブに感謝します。また、stackoverflow.com / questions / 1030793 /…も確認してください。これには、他の興味深いアイデアがあります。

— richb

1

入力フィールドのcssを介した一貫した幅の壮大な解決策、+ 1

— スティーブンスプリンクル2012

11

入力ボックスのサイズ設定プロパティをborder-boxに設定して、境界線がコンテナに重ならないようにすることができます。

— ニコラス2013年

26

「width：autoが何を意味するのか正確に定義されていますか？CSS仕様は曖昧に思えますが、関連するセクションを見逃している可能性があります。」

元の投稿者の質問の上記の部分に実際に回答した人はいません。

これが答えです：http : //www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

widthの値がautoである限り、要素はコンテナよりも広くなることなく、水平マージン、パディング、およびボーダーを持つことができます...

一方、width：100％を指定した場合、要素の合計幅は、それを含むブロックの100％に水平マージン、パディング、境界線を加えたものになります... 。

違いを視覚化するために私は例を作りました：http : //www.456bereastreet.com/lab/width-auto/

— 応答
ソース

4

いい答え/リンク、私は "box-sizeing：border-box"の3番目の例を置くことをお勧めします...

— ハーフビット

これは入力用ではなく、autoがデフォルトであるため、それがどのように役立つかわかりません

— Barbz_YHOOL

9

他の回答で述べたように、幅：autoは、入力のsize属性によって生成されるため、機能しません。これは、「auto」などに設定できません。

ボックスモデルとうまく連動させるために使用できるいくつかの回避策がありますが、私が知る限り素晴らしいものはありません。

まず、パーセンテージを使用してフィールドのパディングを設定し、幅が100％になるようにします。例：

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

もう1つ、絶対位置を使用して、左と右を0に設定してみてください。このマークアップを使用すると、次のようになります。

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

そしてこのCSS：

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

この絶対配置により、入力のパディングやマージンに関係なく、入力が親フィールドセットを水平方向に埋めます。ただし、これの大きな欠点は、フィールドセットの高さを処理する必要があることです。これは、設定しない限り0になります。入力がすべて同じ高さである場合、これは機能します。フィールドセットの高さを入力の高さに設定します。

これ以外にもいくつかのJSソリューションがありますが、JSで基本的なスタイリングを適用するのは好きではありません。

— ジョン・ラーシュ
ソース

8

のでinputさんはwidthそれのことで制御されているsize属性、これは私がどのように初期化しinput width、その内容に応じて：

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— ファブリシオ
ソース

1

この#angular具体的な回答はOPの質問に対する有効な回答ではありませんが（私は賛成票を投じていません）、この特定のアイデアを見つけるためだけにこのトピックに行きました。

— -nobug

5

それはあなたが望むものとは正確には違うかもしれませんが、私の回避策は自動幅スタイリングをラッパーdivに適用することです-そして入力を100％に設定します。

— mwilcox
ソース

0

私が考えることができる唯一のオプションは、を使用することwidth:100%です。入力フィールドにもパディングが必要な場合は、コンテナを配置するだけではlabelなく、代わりにフォーマットをそのラベルに移動し、ラベルのパディングも指定します。入力フィールドは固定されています。

— ラホス・メザロス
ソース

0

回答1-「応答」はそれに適切な回答/リンクを与えました。簡単に言えば、「auto」がデフォルトなので、要素の幅の変更を削除するようなものです

回答2- width: 100%代わりに使用してください。親コンテナ、この場合は「フォーム」の100％が入力されます。

— アキル・グプタ
ソース

-4

絶対に驚くべき機能を説明する絶対に驚くべきリンク：

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

要旨：

要素をコンテナに入れますdisplay: flex;。
flex-grow: 1;含まれる各要素に設定します。
これらの含まれている要素の中に、拡大する必要がある要素がある場合は、含まれている要素とその（含まれている）子要素に対して手順1と2を繰り返します。
さまざまなニーズに合わせて調整します（リンクを参照）。

編集- 例：

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

— アンドリュー
ソース

入力の自動幅をどのように支援していますか？

— カーネル

@kernelシンプル。例を参照してください。

— アンドリュー、

入力の幅は常に100％であり、可能な最小値ではありません。

— カーネル

2

入力はまだ問題であったその内容と同じ幅ではありません。

— カーネル

あなたが受け入れられた-そして他の皆の-を読んだ場合、答えは違う何かをします。質問は「誰が間違っているのか、あなたは何を正しくやっているのか」ということになります。

— カーネル