为什么<input>元素不尊重最小宽度？

问题描述：

http://jsbin.com/nuzazefuwi/1/edit?html,css,output 为什么<input>元素不尊重最小宽度？

在上面的链接中，文本框应该只有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

它看起来像输入开始得到正确的宽度只有经过.mainmin-width比156px更大。

set'border：0;大纲：0'为'input' – 2015-04-06 11:53:34

你想输入字段宽度应该是10px？真的但如何？ – 2015-04-06 11:59:46

在您的演示文本框中显示100％。 – user3386779 2015-04-06 12:00:40

答

还有就是size="20"上<input>类型的文本，搜索，电话，网址，电子邮件或密码，大约一个默认值。 100px宽度（可因不同的浏览器和操作系统而异）。

对于父级，您设置了min-width:15px，这不会产生任何影响，因为该值远小于100px。如果将其更改为width:15px或max-width:15px（或将其添加为额外的规则），该功能将正常工作。

正如评论，或者您可以给size一个小值，如size="1"。

该div需要自动展开，以防其内容发生变化（获取更大），所以我不能设置宽度或最大宽度;如果内容的宽度至少为152px – Omu 2015-05-02 08:21:25

设置'size ='1'''''''''''''''''''输入帮助降低了限制，那么所有的工作都正常（输入宽度为100％），看看http://jsbin.com/ jajebukota/1 /编辑，如果删除一些文本/内容，.main将减少，输入将保持100％ – Omu 2015-05-02 09:04:32

@Omu很高兴看到你找到了解决方案:)我没有这么想，因为我并不完全确定你想要达到的目标。 – Stickers 2015-05-02 13:02:18

答

改变你的CSS宽度为155px

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

我需要的输入宽度为100％，我实际上使用atm的js解决方法来隐藏输入，获取宽度。main并设置.input的宽度;我想知道是否有一些css规则，我错过了 – Omu 2015-04-06 11:52:30

答

的.main容器跨内，只有当你调整屏幕尺寸小，你会看到input实际上比小适合里面的内容的宽度默认输入宽度。如果您更改.main内容的width，您将观察到input在大屏幕上将其更改为默认width，并缩小至不低于min-width值。

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

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

答

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

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

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

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

我想这也是什么@sdcr回答，他也给你有关默认大小和计算的细节。

为什么元素不尊重最小宽度？

相关推荐