<div class="container"> <input type="text" /> <div class="filler"></div> </div> div.container { padding: 5px; border: 1px solid black; background-color: gray; } div.filler { background-color: red; height: 5px; } input { display: block; }
为什么输入框不扩展为具有与外部相同的宽度,例如div.filler?也就是说,为什么输入框不能像其他块元素那样扩展以适合其容器width: auto;?
div.filler
width: auto;
我尝试检查Firebug中的“用户代理CSS”以查看是否可以在此处提出一些建议。没运气。我找不到CSS中的任何特定差异,可以将它们具体链接到输入框,而与常规框不同div.filler。
除了好奇之外,我还想知道为什么要深入了解它,以找出一次设置宽度而忘记它的方法。我目前的做法是显式设置两者input及其包含的块元素的宽度,这似乎是多余的,而且不如模块化。虽然我熟悉将输入元素包装在div中然后为输入元素分配负边距的技术,但这似乎是非常不可取的。
input
规范导致输入框的格式与divs之类的普通块元素不同吗?边框框解决方案很棒,但是它并不能满足人们找出为什么输入框首先是这种方式的原因,以及为什么不能使它们表现得完全像普通div的不使用边框的s 那样的愿望。箱模型这些天。
div
。
有些元素(<input>, <select>, <button>, <img>, <object>, and <textarea>)被视为 替换元素, 其外观和尺寸由外部资源定义。(例如,操作系统,插件等)
<input>, <select>, <button>, <img>, <object>, and <textarea>
替换的元素可以具有固有的尺寸- 宽度和高度值,该值由元素本身而不是由文档中的周围环境定义。例如,如果图像元素的宽度设置为auto,则将使用链接图像文件的宽度。内部尺寸还定义了一个内部比例,用于确定元素的计算尺寸(如果仅指定一个尺寸)。例如,如果仅为图像元素指定宽度(例如100px),而实际图像的宽度为200像素,高度为100像素,则元素的高度将按相同的比例缩放到50px。 在CSS的控制范围之外,替换的元素还可能具有由元素施加的视觉格式要求;例如,为表单元素呈现的用户界面控件。
替换的元素可以具有固有的尺寸- 宽度和高度值,该值由元素本身而不是由文档中的周围环境定义。例如,如果图像元素的宽度设置为auto,则将使用链接图像文件的宽度。内部尺寸还定义了一个内部比例,用于确定元素的计算尺寸(如果仅指定一个尺寸)。例如,如果仅为图像元素指定宽度(例如100px),而实际图像的宽度为200像素,高度为100像素,则元素的高度将按相同的比例缩放到50px。
在CSS的控制范围之外,替换的元素还可能具有由元素施加的视觉格式要求;例如,为表单元素呈现的用户界面控件。
W3C的CSS 2.1“ Visual Formatting ModelDetails”部分[讨论]了替换元素和未替换元素的宽度计算。
总体而言,某些表单元素(<textarea>,<button>,and<input>)非常令人讨厌。可以/会改变吗?可能不会很快到来…直到它的核心发生变化,我们必须坚持这些技巧
<textarea>,<button>,and<input>