Question

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

在上面的链接中，文本框只应为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后才开始获得正确的宽度。

Answer 1

将您的CSS宽度更改为155px

.input{  
  width:155px;  //Replace 100% to 155px
 box-sizing:border-box;
 }

Answer 2

.main容器跨越内部内容的宽度，只有当您将屏幕大小调整为小尺寸时，您才会看到input实际上适合内部小于默认输入宽度。如果您更改width内容的.main，您会发现input在大屏幕上更改了它的默认width并缩小到不小于min-width {1}}值。

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

http://jsbin.com/xeyupinaja/3/edit

为什么<input />元素不支持min-width？

2 个答案: