3

ここで作成しようとしているものを実現する CSS が思いつかないので、ここでテーブルに頼りたくなります。

私<div>は2つのものを含むコンテナを持っています:

  • テキスト入力ボックス ( <input type='text' />)
  • ボタン（<input type='button' />）

ボタンを右揃えにしたい (固定幅は指定していませんが、簡単に指定できます)。テキスト入力ボックスは、ボタンのすぐ左に配置し、残りのスペースを占める必要があります。これが私が探しているものの例です：

ここに画像の説明を入力

残念ながら、次の HTML はこれを実現していません (インライン スタイルはご容赦ください - デモンストレーションのみを目的としています)。

<input type="button" value="Test" style="float: right;" />
<input type="text" style="display: block; width: 100%;" />

ラッパーを追加しようとしました<div>が、それもうまくいきませんでした。私は何を間違っていますか？レイアウトでこれを簡単に達成できました<table>が、何かが欠けているに違いなく、それを行うためのより良い方法があると確信しています。

4

2 に答える 2

10

なし<table>でも可能ですが、あまり明白ではありません。

参照： http： //jsfiddle.net/thirtydot/wE7jc/2/

<input type="button" value="Test" style="float: right;" />
<div style="overflow: hidden; padding-right: 8px">
    <input type="text" style="width: 100%;" />
</div>

これが機能する理由はここで説明されています。

于 2011-10-09T04:56:33.807 に答える
2

固定幅のボタンを気にしない限り、これは次のことを行う必要があります。

http://jsfiddle.net/4WghJ/

基本的には、ボタンを補正するために、入力を右マージンのあるdivでラップします。

于 2011-10-09T04:59:38.190 に答える