为啥 display:block on button 不会使按钮成为容器的全宽？ [复制]
Posted
技术标签:
【中文标题】为啥 display:block on button 不会使按钮成为容器的全宽？ [复制]【英文标题】：Why display:block on button doesn't make the button full width of the container? [duplicate]为什么 display:block on button 不会使按钮成为容器的全宽？ [复制] 【发布时间】：2022-01-16 19:05:28 【问题描述】：为什么带有 display: block 的按钮没有占据容器的整个宽度？ 下面的代码使按钮只占用内容的宽度。
块元素的MDN定义：
"块级元素总是从新行开始并占用 全宽可用（向左和向右延伸至它 可以）。”
&__actions
width:800px;
.btn-primary
display: block;
background-color: #382AE1;
color: white;
padding: 15px 4px;
border-radius: 11px;
代码笔： https://codepen.io/rihamkharoub/pen/eYGBLOE
【问题讨论】：
你能在 CodePen 或类似的地方提供一个例子吗？ 请在您的问题中直接输入有效的 sn-p，而不是在其他网站上。见***.com/help/minimal-reproducible-example @PyrettaBlaze codepen.io/rihamkharoub/pen/eYGBLOE @rihankh 外部代码只有在所有相关代码都在问题本身正确的情况下才可接受。 【参考方案1】：您需要设置按钮widht: 100%。现在它可以拉伸父元素的整个宽度。
div
width: 600px;
height: 80px;
background: blue;
button
display: block;
background: red;
width: 100%;
<html>
<head>
</head>
<body>
<div>
<button class="btn-primary">BTN CONTENT</button>
</div>
</body>
</html>像这样！
【讨论】：
OP 没有要求修复。检查问题，代码如何只回答以 Why... 开头的任何问题？以上是关于为啥 display:block on button 不会使按钮成为容器的全宽？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
为啥 CSS 中的“margin: 0 auto”+“display:block”命令使元素居中？ [复制]
为啥 display:inline-block 可以防止边距崩溃？ [复制]
为啥 bootstrap 在 .span 上使用浮点数而不是 display: inline-block？