为什么 <input> 元素不遵守最小宽度？

Question

http://jsbin.com/nuzazefuwi/1/edit?html,css,输出

在上面的链接中，文本框应该只有 10px 而不是宽度 152px 。

这是代码：

 .input {
  width: 100%;
  box-sizing: border-box;
}

.cont {
  padding: 2px;
}

.main {
  position: absolute;
  border: 1px solid black;
  min-width: 15px;
}

 <div class='main'>
  <div class='cont'>
    <input type="text" class='input' />
  </div>
</div>
<br/>
<br/>
<br/> the textbox should have 10px

看起来只有在 .main min-width 大于 156px 之后，输入才开始获得正确的宽度。

原文由 Omu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

There is size="20" set on <input> type text , search , tel , url , email 和 password … 默认情况下，它大约是 100px 宽度，尽管它在不同的浏览器和操作系统中可能会有所不同。

在父母身上，你有 min-width:15px; 设置，这不会产生任何影响，因为该值远小于 100px 。如果将其更改为 width:15px; 或 max-width:15px; 您将看到差异。

或者，您可以给 size 一个非常小的值，例如 size="1" 。

原文由 Stickers 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你有一个 min-width 集，但没有 max-width 。

教科书具有由浏览器设置的默认大小。该默认大小大于 min-width ，因此浏览器和 css 都乐于让默认宽度发生并增加容器的宽度。

通过为容器设置 max-width 或 width ，将限制容器和输入的大小，并相应地计算它们的大小。

 .main{
  position:absolute;
  border:1px solid black;
  min-width:14px;
  max-width:140px; // What do you want here?
}

我认为这也是@sdcr 的回答，他还为您提供了有关默认大小和计算的详细信息。

原文由 Myst 发布，翻译遵循 CC BY-SA 4.0 许可协议