为什么不“显示：块” & " width：auto"拉伸按钮来填充容器？ [英] Why doesn't "display: block" & "width: auto" stretch a button to fill the container?
问题描述
当我在按钮上设置 display：block; 和 width：auto; 按钮拉伸填充容器像其他块元素一样。由于某种原因，至少在最新的Chrome中不会出现这种情况。
当Google搜索时，我发现很多人提出同样的问题， 我感兴趣的东西（我完全能够拉伸我的按钮
我想了解一下这个按钮的属性， ，什么原因导致按钮忽略 display：block;
这里是我的意思的示范：
button {display：block;}
< button style =width：auto;> width：auto;`< / button>< button style =width：100％; width：100％`< / button>
预期 width：auto; 的按钮也会展开。
为了绝对清晰，这不是重复的输入与显示：块不是一个块，为什么不？或任何类似的问题，除非只有答案描述了伸展有问题的元素。
编辑：可能与在CSS / DOM中，防止带有display：block的输入框扩展到其容器大小的是什么？ 。另一方面，问题根本没有提及按钮。
有几个元素（< input> ，< select> ，< button> ，< img> ，< object> textarea> ），它们的外观和尺寸由外部资源定义。 （例如，操作系统，插件等）。使用HTML5你还有一些其他的< audio> 和< canvas> 和一些。
替换的元素可以具有元素本身定义的内在维度宽度和高度
值，而不是文档中的
周围环境。例如，如果图像元素的
宽度设置为auto，则将使用链接的图像文件的宽度。
内在维度还定义了用于
的内在比率确定元素的计算维度只应指定一个
维度。例如，如果只为图像元素（例如，100像素）指定了宽度
，实际图像的宽度为200像素，宽度为100像素，则元素的高度将按比例缩放
替换的元素也可以具有可视化的格式化要求，元素在CSS的控制之外的
;例如，用户
接口控件为表单元素呈现。
请注意 - 正如您在评论中的讨论中所看到的 - 按钮 替换由w3c定义的元素。但是，它的行为像一个，这是在本文< a>。
When I set display: block; and width: auto; on a button, I'd expect the button to stretch to fill the container as other block elements do. For some reason, it doesn't, at least not in latest Chrome.
When Googling around, I found a lot of people asking the same question, who were satisfied with an answer to "How do I stretch my buttons to fill the container?" That is not what I'm interested in. (I'm perfectly able to stretch my buttons any way I need.) Inspecting button properties, including the ones imposed by default by the browser didn't help me either.
I'd like to understand, what causes buttons to ignore display: block; width: auto; and stay horizontally sized based on their contents.
Here's a demonstration of what I mean:
button {
display: block;
}
<button style="width: auto;">button with `display:block; width:auto;`</button>
<button style="width: 100%;">button with `display:block; width:100%`</button>
I'd expect the button with width:auto; to be stretched as well.
Just to be absolutely clear, this is not a duplicate to input with display:block is not a block, why not? or any similar question unless that has only answers describing ways to stretch the elements in question.
Edit: It might be a duplicate of What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container. On the other hand, that question doesn't mention buttons at all. You need to read the answer to find out it applies to buttons as well.
There are a few elements (<input>, <select>, <button>, <img>, <object>, and <textarea>) that are considered replaced elements whose appearance and dimensions are defined by an external resource. (e.g. the operating system, a plugin, etc). With HTML5 you have a couple more of those like <audio> and <canvas> and some more.
Replaced elements can have intrinsic dimensions—width and height values that are defined by the element itself, rather than by its surroundings in the document. For example, if an image element has a width set to auto, the width of the linked image file will be used. Intrinsic dimensions also define an intrinsic ratio that’s used to determine the computed dimensions of the element should only one dimension be specified. For example, if only the width is specified for an image element—at, say, 100px—and the actual image is 200 pixels wide and 100 pixels high, the height of the element will be scaled by the same amount, to 50px.
Replaced elements can also have visual formatting requirements imposed by the element, outside of the control of CSS; for example, the user interface controls rendered for form elements.
(Shameless copy of the answer at this source and possible dublicate, which extracted the information from this article.)
Please note that - as you will see in the discussions in the comments - button is not really a replaced element defined by w3c. However it is behaving like one, which is discussed further in this article.
这篇关于为什么不“显示：块” & " width：auto"拉伸按钮来填充容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
