输入元素未内联显示

Question

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

这里是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 美分。

Answer 2

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

事实并非如此。 input 的 type="text" 元素的默认 size 为 20，这可能导致不同的宽度（取决于字体、字体大小等）。

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

例如：

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

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

<p>No Width</p>
<table>
  <tbody>
    <tr>
      <td>
        <div>
          <input type="text" name="some-field" />
          <button class="symbol" type="button"></button>
          <button class="symbol" type="button"></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

希望对你有帮助！