生存工具包

Question

除了input内div内的两个按钮外，我们还有一个td元素。我不太明白，当 div 的所有子项（td）具有宽度时，如何将它们全部放在一行中。

我可以将输入元素的宽度设置为65％，例如，但这只是一个技巧。

有人知道，如果表单元格具有宽度属性，为什么输入元素要占据全部宽度？我没有发现任何提示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

有人知道，如果表格单元格具有宽度属性，为什么输入元素会占用全部宽度？

不是这样。 input的{{1}}元素的默认type="text"为20，这会导致不同的 width （取决于字体，字体大小等）。

在您的情况下，您已将size的宽度设置为163px。如果您将宽度增加为td，则所有元素都将排成一行。

例如：

250px

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

希望有帮助！

Answer 2

好吧，我会说（而且我也不是专家，所以请不要相信我的话），因为它从未设置宽度，所以将元素彼此相邻设置（在您的jsfiddle第二个示例中）。因此，由于没有边界可保持“注意”，因此它将使所有这些并排对齐。但是，当您为td设置宽度时，必须将x px的边界保持在'mind'中。如果不指定输入，将设置输入的默认宽度。现在，考虑您的按钮也具有默认宽度。这意味着它尝试是inline或inline-block，但由于仍然有边界而“失败”。因此，当您设置某个百分比时，它确实起作用，因为相对于其父项，它将花费x percentage。因此，要么增加td的宽度，要么为按钮和输入字段设置x px。如果无法选择，则可以选择百分比。

但是再说一次，我不是这个话题的专家，所以不要相信我。这是我的2美分。

输入元素未内联显示

生存工具包

HTML

CSS

2 个答案: