0

与えられた:

<table>
<tr>
    <td>
        <div id="dv">
            <button id="bt" type="button">X</button>
            <input id="num" type="number" value="1"/>
        </div>
    </td>
    <td>
        <input type="text" value="aaa"/>
    </td>
</tr>
</table>​

http://jsfiddle.net/mark69_fnd/ZZFc5/1/

ここに画像の説明を入力

しかし、ウィンドウのサイズを変更すると、次のようになります。

ここに画像の説明を入力

私が達成したいのは、次のことです。

  1. ウィンドウのサイズが変更されても、すべてのコントロールは同じ行に表示されます。
  2. 入力コントロールは、使用可能なすべてのスペースを占有します (ボタンのサイズは一定にすることができます)。
  3. ウィンドウのサイズが変更されると、入力コントロールのサイズも変更されます。
  4. X ボタンは、最初のセルを入力コントロールと共有する必要があります。
  5. X ボタンを除いて、絶対的なサイズは使用しないでください。

これは単純なはずですが、頭がわかりません。

知恵を貸してください。

編集

可能であれば、絶対値 (ピクセルなど) を指定することは避けたいと思いますが、絶対的な幅と高さを指定できる X ボタンは除きます。

EDIT2

5 番目の制約を追加しました。

4

6 に答える 6

3

< nobr > はあなたの友達です

<table>
<tr>
    <td>
        <div id="dv">
          <nobr>
            <button id="bt" type="button">X</button>
            <input id="num" type="number" value="1"/>
          </nobr>
        </div>
    </td>
    <td>
        <input type="text" value="aaa"/>
    </td>
</tr>
</table>

http://jsfiddle.net/mXSgd/

実際のサイズ変更可能なフォーム要素の場合、これが役立つ場合があります:

http://dev.sencha.com/deploy/ext-4.0.0/examples/form/anchoring.html

またはこれ：

http://www.switchonthecode.com/tutorials/javascript-tutorial-resizeable-textboxes

于 2012-08-23T02:42:58.563 に答える
1

その流れで、コンテナ (または子) に最小幅を設定できます。この例ではテーブルです。以下を参照してください。または、テーブルをパーセントでリセットして、柔軟でありながら制御できるようにします。

<table style="min-width:300px">

http://jsfiddle.net/mark69_fnd/ZZFc5/1/

テーブル アプローチを捨てて、css フロートを使用することができます

于 2012-08-23T02:49:10.870 に答える
0

テーブルにスタイルシートを設定すると役立つ場合があります。

テーブル {幅: 200px;}
テーブル tr td {幅: 30%;}

http://jsfiddle.net/ZZFc5/2/

于 2012-08-23T02:57:06.193 に答える
0

のようにテーブルに幅を付けることができる場合は100%、次のようなことを試すことができます。

テキスト フィールドに ID を追加するように HTML を変更しました。これ以上何もない。

HTML:

<table>
    <tr>
        <td>
            <div id="dv">
                <button id="bt" type="button">X</button>
                <input id="num" type="number" value="1"/>
            </div>
        </td>
        <td>
            <input id="txt" type="text" value="aaa"/>
        </td>
    </tr>
</table>​​​​

CSS:

table {
    width: 100%;
}
tr td {
    position: relative;
    width: 50%;
}

#bt {
    width: 25px;
    top: 0;
    left: 0;
    position: absolute;
}

button {
    padding: 0;
    margin: 0;
}

#num {
    position: absolute;
    top: 0;
    left: 25px;
    right: 0;
}

#txt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

私があなたのものからフォークした JSFiddle を参照してください。

基本的に、ボタンのサイズを 25px に設定し、各<td>s の幅をテーブル幅の 50% に設定します。次に、絶対配置を使用して、テキストフィールドと入力フィールドに、利用可能な水平方向のスペースをすべて占有し、それ以外は何も占有しないように指示しました。したがって、ウィンドウのサイズを変更するとコンポーネントのサイズも変更されますが、2 行目に「ドロップ」することはありません。</p>

于 2012-08-23T03:14:40.650 に答える