为什么< input>元素尊重最小宽度? [英] Why doesn't the <input> element respect min-width?

问题描述

http://jsbin.com/nuzazefuwi/1/edit?html， CSS，输出

在文本框上方的链接中，其宽度应为10像素，而宽度应为10像素.

In the link above the textbox should have only 10px instead it has a width of 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之后，输入才开始获得正确的宽度.

It looks like the input starts to get the correct width only after .main min-width is greater than 156px.

推荐答案

There is size="20" set on <input> type text, search, tel, url, email, and password ... by default, which is approximately of 100px width, although it can vary in a different browser and operating system.

在父级上，您设置了min-width:15px;，这不会产生任何影响，因为该值比100px小得多.如果将其更改为width:15px;或max-width:15px;，您将看到差异.

On the parent, you have min-width:15px; set, that does not take any effects, because the value is much smaller than 100px. If you change it to width:15px; or max-width:15px; you will then see the differences.

或者，您可以给size一个很小的值，例如 size="1" .

Alternatively you can give the size a very small value such as size="1".

这篇关于为什么< input>元素尊重最小宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！