如何制作一个宽度尽量占满当前行的 button 组件

596 阅读1分钟

display: block 对 button 无效。

都知道,块级元素可以自动占满当前行,但对 button 元素设置 display: block 属性并没有作用。

image.png

设置 width: 100% ?

设置宽度 100% 确实可以让按钮占满一行

image.png

但有个问题,如果这个 button 需要和两边有点距离怎么办呢, 设置margin ?

image.png

这样会导致 button 超出容器,因为 button 的宽度就等于当前容器的宽度。

那该怎么办呢

可以在 button 外再包一层 div,通过设置 div 的 padding (margin也行)达到效果。

image.png