Svelte中表单内Flex布局下自定义按钮无法自适应宽度问题

问题根源在于：.topButtons是flex容器，其中的form作为直接子元素，默认是块级元素，在flex布局下宽度仅包裹内容，导致内部的FunButton无法拉伸到和其他按钮一致的宽度。以下是几种可行的解决方式：

方式一：通过CSS调整form的flex属性及内部布局 #

给form添加样式，让它在flex容器中占据均等空间，同时让内部按钮自动撑满form：

.topButtons form {
  flex: 1; /* 让form和其他按钮平分flex容器的可用空间 */
  display: flex; /* 使form内部采用flex布局，按钮自动填满容器 */
}

方式二：直接给按钮和form设置宽度样式 #

如果不想修改全局CSS，可以直接在标签上添加内联样式：

<form action="?/delete" method="post" style="flex: 1;">
    <FunButton size="medium" color={'red'} style="width: 100%;">Delete media</FunButton>
</form>

这里flex:1让form撑满对应空间，width:100%让按钮填满form的宽度。

方式三：将form改为inline-flex布局 #

把form的display改为inline-flex，使其和其他按钮的布局行为一致，同时设置flex:1占据均等空间：

.topButtons form {
  display: inline-flex;
  flex: 1;
}

额外说明 #

如果你的FunButton组件内部有固定宽度的限制，需要确保组件本身支持宽度拉伸（比如组件根元素设置width: 100%或flex:1），否则上述样式可能无法生效。

内容的提问来源于stack exchange，提问作者Vass