html - 输入元素未显示为内联

Question

除了 div 中的两个按钮外，我们还有一个 input 元素，它位于 td 中。我不太明白，当 div 的父级(td)具有宽度时，如何将所有子级放在一行中。

这里是 an example .

例如，我可以将输入元素的宽度设置为 65%，但这只是一种 hack。

有人知道，为什么输入元素占据所有宽度如果表格单元格具有宽度属性？我没有找到任何提示 in the spec .

如何设置内联输入元素 (display)？ display: flex 用于 div(就像它是 suggested for this 一样)？

生存工具包

HTML

<p>Input takes all width?</p>
<table>
    <tbody>
        <tr>
            <td width="163px">
                <div>
                    <input type="text" name="some-field" />
                    <button class="symbol" type="button"></button>
                    <button class="symbol" type="button"></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

button.symbol {
    border-width: 0;
    background: white;
    display: inline;
}
button.symbol::before {
    content: '\0394';
}
input {
    display: inline;
}

Answer 1

好吧，我会说(我不是专家，所以不要想当然)它将元素设置为彼此相邻(在您的 jsfiddle 第二个示例中)，因为您从未指定宽度。因此它将所有这些都对齐在一起，因为它没有要记住的边界。但是，当您为 td 设置宽度时，它必须“记住”您的 x px 的边界。如果您不指定，将设置输入的默认宽度。现在，考虑到您的按钮也有默认宽度。这意味着它试图成为 inline 或 inline-block，但“失败”了，因为它仍然有边界。因此，当您设置一定百分比时它会起作用，因为相对于其父项，它将占用 x percentage。因此，要么增加 td 的宽度，要么为按钮和输入字段设置 x px。如果这不是一个选项，您可以选择百分比。

不过，我不是这个话题的专家，所以不要相信我的话。这是我的 2 美分。