html - 如何使按钮和输入保持在表格单元格内的同一行？

Question

鉴于：

<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 按钮可能会被赋予绝对宽度和高度。

编辑2

添加了第 5 个约束。

Answer 1

< 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

Answer 2

在这种情况下，您可以为容器（或子项）设置最小宽度，在本例中为表格，见下文。或者以百分比重置表格，使其灵活且可控。

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

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

您可以放弃表格方法并使用 css 浮点数

Answer 3

在表格上设置样式表可能会对您有所帮助。

表格{宽度：200px;}
表格tr td {宽度：30%;}

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

Answer 4

如果您可以在桌子上粘贴一个宽度，例如100%，那么您可以尝试以下操作。

我修改了您的 HTML 以在文本字段中添加一个 id；而已。

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%。然后我使用绝对定位来告诉文本字段和输入字段占用所有可用的水平空间，仅此而已。因此，当您调整窗口大小时，组件将调整大小，但永远不会“下降”到第二行。​</p>

Answer 5

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

Answer 6

将这些元素放在单元格旁边的另一个表格中