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

鉴于：

X
​

但是，如果我调整窗口大小，则会得到以下结果：

我想要实现的是：

所有控件保持在同一行上，即使调整了窗口的大小

输入控件占用所有可用空间（按钮大小可以保持不变）

调整窗口大小时，输入控件也会调整大小

X按钮必须与输入控件共享第一个单元格

除X按钮外，不应使用绝对尺寸

这应该很简单，但我就是想不起来

请分享你的智慧

编辑

如果可能的话，我希望避免为所有对象指定绝对值（如像素），但X按钮可能会指定绝对宽度和高度

EDIT2

添加了第五个约束

你的朋友在这里吗

X

对于实际可调整大小的表单元素，这可能会有所帮助：

或者这个：

你的朋友在这里吗

X

对于实际可调整大小的表单元素，这可能会有所帮助：

或者这个：

---

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

<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>

---

您可以放弃表格方法并使用css浮动。在这种情况下，您可以为容器（或子容器）设置最小宽度，在本例中，它就是表格，请参见下文。或者以百分比重置表格，使其灵活且可控

<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>

---

您可以放弃表格方法，使用css浮动

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

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

---

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

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

---

如果你能像

100%

那样在桌子上粘贴一个宽度，那么你可以尝试以下方法

我修改了HTML，在文本字段中添加了一个id；没别的了

HTML:

看

基本上，我将按钮的大小设置为25px，然后将每个

的宽度设置为表格宽度的50%。然后，我使用绝对定位告诉文本字段和输入字段占用所有可用的水平空间，而不占用其他空间。因此，当您调整窗口大小时，组件将调整大小，但不会“掉落”到第二行。

---

​

如果你能像

100%

那样在桌子上粘贴一个宽度，那么你可以尝试以下方法

我修改了HTML，在文本字段中添加了一个id；没别的了

HTML:

看

基本上，我将按钮的大小设置为25px，然后将每个

的宽度设置为表格宽度的50%。然后，我使用绝对定位告诉文本字段和输入字段占用所有可用的水平空间，而不占用其他空间。因此，当您调整窗口大小时，组件将调整大小，但不会“掉落”到第二行。

---

​

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

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

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;
}

X

X

您可以始终为您的桌子留出最小宽度。（

最小宽度：300px；

）此值取决于字体，不是吗？如果可能的话，除了按钮，我更喜欢不使用绝对值。表格应该只用于表格数据。为什么必须在HTML中使用这种奇怪的表结构？这是我在尝试设计发票页面时所能想到的最好方法。您可以始终为表指定最小宽度。（

最小宽度：300px；

）此值取决于字体，不是吗？如果可能的话，除了按钮，我更喜欢不使用绝对值。表格应该只用于表格数据。为什么必须在HTML中使用这种奇怪的表结构？这是我在尝试设计发票页面时所能想到的最好方法。谢谢，但条件3不成立-输入不调整大小。可调整大小的元素？听起来像js:）+1的链接。我更愿意等一等，看看是否有人提出了一个纯粹的css解决方案…谢谢，但条件3不成立-输入不调整大小。可调整大小的元素？听起来像js:）+1的链接。我更愿意等待一点，看看是否有人提出了一个纯粹的css解决方案…我不想将表大小固定为任何绝对值，因为一个值可能适合一种字体，但不适合另一种字体。唯一可以使用的绝对大小是X按钮。我不想将表格大小固定为任何绝对值，因为一个值可能适合一种字体，但不适合另一种字体。唯一可以使用的绝对尺寸是X按钮。谢谢。但是有一个问题-为什么不只是

td

？没有理由。我最初尝试设置

tr

的样式，但后来想起设置该标记的样式有一些限制，所以我切换到

td

。它是一个稍微更具体的选择器，但工作原理相同

<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>​​​​

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;
}

<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>