web-dev-qa-db-ja.com

CSSはテキストボックスを利用可能なすべての幅に合わせます

ウェブページに次の「行」があります

<div style="width:100%">
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button>
</div>

DropDownコントロール幅を制御することはできません。幅が最も長いオプション値に合わせてサイズが調整されるためです。ボタンは固定幅です。使用可能な残りのすべての幅をTextBoxで埋めるにはどうすればよいですか？

私はそれをテーブルに入れてみましたが、同じ問題に遭遇しました。つまり、他のすべての列を可能な限り小さくしてコンテンツに合わせ、次にTextBox列が残りの幅を埋めるにはどうすればよいですか。

ハックなソリューションは必要に応じて問題ありませんが、最も単純なことを行うことが非常に難しい場合は、CSS標準を気にすることさえ一切しません。

編集：明確にするために、TextBoxによって<input type="text"/>

csstextboxwidth
18
fearofawhackplanet

2018年に更新された回答

この古い質問に出くわしました。現在、すべての主要なブラウザーでサポートされている CSSフレキシブルボックスレイアウトモデル を使用してこれを達成するためのはるかに簡単でクリーンな方法があります。

.flex-container {
  display: flex;
}

.fill-width {
  flex: 1;
}
<div class="flex-container">
        <label>Name:</label><input class="fill-width" type="text" /><span>more text</span>
</div>

これが誰かを助けることを願っています！

以下の古い回答

私はこれが古い質問であることを知っていますが、正しい解決策はここにはありません。

解決策は、テキストボックスをスパンでラップすることです。

HTML：

<label>Input</label>
<span>
    <input/>
</span>

CSS：

label {
    float: left;
}

input {
    width: 100%;
    box-sizing:border-box;
}

span {
    display: block;
    overflow: hidden;
}

例については this fiddle を参照してください（入力でborder-boxを使用するためにパディングを削除したため、現在は少し古くなっています）。

28
dekin88

ここに私のために働いたものがあります。場合によっては、アイテム間で&nbsp;を使用する必要があったことに注意してください。そうしないと、次の行に分類されます。

.flexContainer {
    display: flex;
    width:100%;
}
input {
    width: 100%;
}
<div class="flexContainer">
<span>text:&nbsp;</span> <input/> &nbsp; <label>text</label>
</div>
6
bets

私は以下を提案します：

<div style="width:100%; white-space:nowrap">
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button>
</div>
3
JochenJung

テキストボックスの幅を100％（divで行ったようにcssを使用）に設定できるため、親の全範囲に渡ります（親タグが全画面を拡張すると想定）。

1
xil3

Cssプロパティでtextboxの幅を100％に設定しますdisplay: inline;？

0
Jonny Haynes

Chromeに関する限り、これはCSSでは実行できません。実行可能な方法は、JavaScriptを介してフォームコントロールの size属性 を操作することです。もし文字列の長さは25ですが、クリアランスのために少なくとも10の余分を追加します。

[〜＃〜] html [〜＃〜]

<!-- "The quick brown fox jumps over the lazy dog" is 43 characters long -->
<input type="text" value="The quick brown fox jumps over the lazy dog" id="textbox1" />

JavaScript/jQuery

<script>
    var value = jQuery('#textbox1').val();                  // 43
    jQuery('#textbox1').attr('size', value.length + 10 );   // resizes the textbox
</script>

もう1つのオプションは、バックエンドスクリプトからサイズを事前に計算することです。

PHP/HTML

<?php
$value = "The quick brown fox jumps over the lazy dog";
?>
<input type="text" value="<?php echo $value; ?>" size="<?php echo ( strlen($value) + 10 ); ?>" />
0
Abel Callejo

私がそれを実現可能と見る唯一の方法はJavascriptを使用することです。そのため、divの幅（ピクセル単位）を取得し、他のコントロールの現在のサイズを差し引いて、入力と同じように結果を追加します。その場合は、テキストをスパンコントロール内に配置する必要があります（そのサイズを取得できるため）。

0
Pere Villega