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/

enter image description here

但是，如果我调整窗口大小，那么我就明白了：

enter image description here

我想要达到的目标是：

即使调整窗口大小，所有控件都保持在同一行。
输入控件占用所有可用空间（按钮大小可以保持不变）。
调整窗口大小时，也会调整输入控件的大小。
X按钮必须与输入控件共享第一个单元格。
除X按钮外，不应使用绝对尺寸。

这应该很简单，但我无法理解它。

请分享你的智慧。

修改

如果可能的话，我想避免为所有人指定绝对值（如像素），但是X按钮可以给出绝对宽度和高度。

EDIT2

添加了第5个约束。

Answer 1

＆LT; nobr＆gt;是你的朋友

<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

在桌面上设置样式表可能对您有帮助。

table {width：200px;}
table tr td {width：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;
}

请参阅the JSFiddle I forked from yours。

基本上我将按钮的大小设置为25px，然后将每个<td> s的宽度设置为表宽度的50％。然后我使用绝对定位来告诉文本字段和输入字段占用所有可用的水平房间而没有别的。因此，当您调整窗口大小时，组件将调整大小，但永远不会“掉落”到第二行。

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

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

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

6 个答案: