html - 如何删除末尾的可用空间?

Question

为什么display: inline-block不能正常工作<input type="file">？

我希望元素的宽度与它所构成的内容一样宽（按钮+文本）。但是文本的末尾总是有一些空闲空间。

为什么？这可以解决吗？

input[type="file"] {
  display: inline-block;
  min-width: auto;
  width: auto;
  background-color: lightgray;
}

<input type="file">

截图：https ://ibb.co/pWWdQ0y

标签： htmlcssinput

Answer 1

我不知道它是否适合您，但是可以width通过 CSS 设置：

input[type='file'] {
  width: 180px;
  background-color: lightgreen;
}

<input type="file">