为什么<INPUT>比我说的要宽？
Ian*_*oyd 27 html css html-select html-input
给定a <select>和<input>元素,两者都指定为200px宽:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px" type="text">
</body>
<html>
一个比另一个更宽1,2,3,4:
这是什么原因？
如果有人能说出理由,也许解决方案是显而易见的,而不是黑客和祈祷.
布局
应用的布局非常合理:
更新1:当我写这个问题时,Chrome从17到19更新了.
更新2:将填充<input>从1更改为0:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>
不会使<input> 200px宽(即不修复它).
更新3: 应用CSS重置:
<!doctype html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>
没有解决问题:
另外,我对解决方案不太感兴趣而不是解释.
脚注
- 1,2,3 Chrome
1719,Firefox,Internet Explorer 9 - 4在Windows 7 64位上
奖金阅读
- 如何在IE6中使<option>比<select>更宽？(我不希望选项比选择更宽,我不使用IE6)
- 如何在选择列表中显示扩展选项？(下拉宽度与控件宽度匹配)
- HTML输入元素比包含Div更宽(
<div>此处不包含) - 如何排列HTML输入元素？
jus*_*isb 27
你的<input>不是太宽; 你的<select>太窄了!
真正的问题是,
<select>元素不表现最喜欢的元素做.它使用了Run Code Online (Sandbox Code Playgroud)box-sizing: border-box;填充和边框应用后
width元素的宽度在哪里; 表现得好像只有它处于"怪癖"模式.这与所有其他标准模式html元素相反,后者使用:
Run Code Online (Sandbox Code Playgroud)box-sizing: content-box;要解决此问题,请将其更改
<select>为使用与html其余部分相同的框模型:Run Code Online (Sandbox Code Playgroud)select { box-sizing: content-box; }或者更改
<input>以使用与选择相同的框模型:Run Code Online (Sandbox Code Playgroud)input { box-sizing: border-box; }
输入元素的行为与大多数元素一样,使用content-box模型,其中width是填充和边界应用之前元素的宽度.
您的浏览器设置了默认填充和边框,因此它比您想要的和/或预期的要大.我总是在样式表的顶部使用"CSS重置",如下所示:
* {
padding: 0;
margin: 0;
}
这将确保任何元素都没有默认的填充或边距.
该select元素是一个不同的情况,其中行为更像是一个已box-sizing: border-box启用的元素,其中它考虑了边框和填充到其width规范中.
如果添加box-sizing: border-box到input元素中,它将完全按照您的预期/期望运行.
编辑:粗体化可能与您相关的部分.另一种解决方案是width将输入元素的指定值减少几个像素,以使其与选择框的宽度相匹配.
小提琴演示两种解决方案:http://jsfiddle.net/n4yT2/2/
| 归档时间： |
|
| 查看次数： |
8951 次 |
| 最近记录： |