<button> 不适用于 display: block; [复制]答案

【问题标题】：<button> not working with display: block; [duplicate]<button> 不适用于 display: block; [复制]
【发布时间】：2016-11-03 14:16:00
【问题描述】：

正如标题所说，我有一个 <button> 标签，其中包含 CSS display: block;哪个应该自动使元素跨越容器的宽度？我在页面上有其他按钮，但它们是 <a> 标签，但与 <button> 标签具有相同的 css 类。

可以在此处找到网站：http://www.cqwebdesign.co.uk/stirlinggrey/，因为您可以将每个部分视为底部的按钮链接。然而，正在寻求的人位于页面底部标题为“接收免费指南和报价”的部分中

Codepen 版本：http://codepen.io/anon/pen/zoOQQL

HTML：

<a href="#" class="btn">This is a button</a>
<button class="btn">This is a button</button>

CSS：

.btn {
  font-size: 16px;
  font-family: Open Sans;
  color: #fff;
  border: 0;
  background: #000;
  padding: 10px;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1.5;
  display: block;
  margin-bottom: 10px;
}

谢谢

【问题讨论】：

所以你想让表单的提交按钮是全宽的？
我希望它具有最大宽度，如果屏幕尺寸低于该最大宽度，则为全宽。如果这有意义吗？我附上了代码，只是为了示例而减去了 max-width CSS。
然后只为选定的宽度添加 CSS 媒体查询
button 元素不接受在某些浏览器中对 display 属性的更改。这里的答案可能对你有所帮助：stackoverflow.com/q/35464067/3597276
谢谢 Michael_B，我猜我还需要学习/记住一些东西 :) 我选择了宽度为 100% 的额外 CSS 解决方案，只是想保存额外的 CSS。

标签： html css button block

【解决方案1】：

如果您的问题是按钮需要居中，您需要明确：两者；为了清除它受到上面浮动元素的影响。

块级元素占据整个宽度，但不影响元素本身的宽度。使用宽度：;标记来改变它。

希望这会有所帮助:)

【讨论】：