如何防止 <button> 缩小到其内容的大小？答案

【问题标题】：How can I prevent a <button> shrinking to the size of it's content?如何防止 <button> 缩小到其内容的大小？
【发布时间】：2011-10-16 22:57:15
【问题描述】：

我在一个容器中有两个元素：

<div class="container">
    <span>This is a div</span>
    <button>This is a button</button>
</div>

样式如下：

span, button {
    display: block;
    padding: 4px;
    border: 1px solid black;
    margin: 5px;
    background: #c0c0c0;
    font: inherit;
}

.container {
    border: 1px solid black;
}

您可以观看现场演示here。

为什么按钮显示的宽度与跨度不同？如何使按钮表现得像标准块级元素？

我需要在这里使用<button>，因为它的目的是提交表单。

【问题讨论】：

@Nightfirecat：如果我将display: block 应用于按钮，则不应该。

标签： html css

【解决方案1】：

这应该可以解决问题。实例：http://jsfiddle.net/925qz/18/

.container {
    border: 1px solid black;
    padding: 5px;
}
span, button {
    display: block;
    padding: 4px;
    border: 1px solid black;
    background: #c0c0c0;
    font: inherit;
}
button{
    width:100%;
    margin-top: 5px;
    text-align: left;
}

【讨论】：

如果他可以将padding 设置在.container 上，那么您将得到迄今为止最好的答案。
虽然我同意这解决了问题，但我更关心我需要覆盖什么样式以使其表现得像一个跨度。特别是在 webkit 中，因为一切似乎都归结为特定于供应商的 css。
@eric：我不明白您在寻找什么：“我需要覆盖什么样式才能使其表现得像一个跨度”。您是否期望有一个规则使其与span 相同？
@tw16：我希望有一些规则集使它们的行为都像<div>s
@eric：没有。这个问题类似于我回答的问题here。 button 元素不符合标准盒子模型。所以需要考虑内边距和边框。

【解决方案2】：

我希望有一些规则集使它们两者兼而有之表现得像<div>s

没有。原因是button 是"replaced element"。

我能找到的最清楚的来源是：http://reference.sitepoint.com/css/replacedelements

替换元素是外观和尺寸符合由外部资源定义。示例包括图像（<img> 标签），插件（<object> 标签）和表单元素（<button>、<textarea>、 <input> 和 <select> 标签）。所有其他元素类型都可以参考作为不可替换的元素。

被替换的元素也可以有视觉格式要求通过元素，不受 CSS 控制；例如，用户为表单元素呈现的界面控件。

【讨论】：

【解决方案3】：

分离跨度和按钮选择器，然后为按钮选择器添加宽度。

【讨论】：

+1 虽然我认为您不一定需要分离现有的。但是，对于具有宽度属性的按钮，您确实需要另一个选择器。
我会给它什么宽度？它们应该填满容器，无论大小如何，两边都留 5px。
@Eric：我刚试过你的代码，97% 对我来说似乎工作正常。
@techsilo：不不不不不！不要混合像素和百分比宽度并期望它们增加到 100%！
@Eric：如果你想使用固定宽度，我想你也需要为 .container 指定宽度（或者你至少需要猜测 .container 的默认宽度，无论你在哪里做使用这个）。

【解决方案4】：

浏览器通常为许多元素提供不同的默认样式。标题元素，如 h1 和 h2、ul、strong 和 em 都使用默认 CSS 设置样式。一般的策略是使用Yahoo! reset css stylesheet 之类的东西来删除这些样式，以获得更好的跨浏览器外观。

这不会立即帮助您解决按钮问题，但可以部分解释它。在内部，浏览器中的复杂元素（例如按钮）由您作为用户无权访问的 HTML 定义。此内部 HTML 也通过 CSS 设置样式。对于按钮，您必须使用明确的 CSS 以不同于浏览器指示的方式对其进行样式设置。给它一个 width 并了解内部填充规则可能会使其外观与具有类似规则的 div 或 span 不同。

【讨论】：

【解决方案5】：

表单元素在几乎每个浏览器中都使用不同的盒子模型。这就是为什么它们实际上永远不会与其他元素具有相同的大小，即使它们都设置了相同的尺寸。我还发现了 Firefox 针对这个问题的错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=562153

我总是将以下代码放在我的重置样式表中，以获得更均匀的工作基础：

select, input, textarea, button {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

该代码适用于 IE8 及更高版本以及所有其他主流浏览器，根据 PPK：http://www.quirksmode.org/css/contents.html

【讨论】：

【解决方案6】：

当您为按钮应用 100% 的宽度（就像块元素通常具有的那样）时，它将忽略填充！几天前我遇到了这个问题：

<button> padding / width problem

如果您想填写所有宽度并应用填充，这应该可以完成工作：

button {
    width: 100%; 
    /* prefixes for box-sizing here */
    box-sizing: content-box;
}

当然，总宽度将是 100% + 内边距，所以它会超出您的预期。因此，您可能必须采用固定宽度。

【讨论】：

【解决方案7】：

http://jsfiddle.net/925qz/30/

我如何纠正它：左侧和右侧的填充已设置，但其周围的所有内容均由容器管理按钮的宽度为 100%。最后，按钮的分隔由顶部 5px 边距管理。

span, button {
    display: block;
    padding-top:4px;
    padding-bottom:4px;
    border: 1px solid black;
    background: #c0c0c0;
    font: inherit;
}

button{
    margin-top:5px;
    width:100%;  
}

.container {
    border: 1px solid black;
    padding:5px;
}

【讨论】：