Html 如何使按钮宽度为100%'；s位于文本区域下方

我已经尝试过使用带有auto-fit的网格，但是我无法让它工作。有没有一种方法可以在没有javascript的情况下做到这一点？（或使用JS（尚未学习JS，但供将来参考））最好不使用JS

.inputgroup1{
显示器：flex；
柔性包装：包装；
}
#提交{
宽度：自动；
显示：块；
框大小：边框框；
边际：0px；
填充：20px 0px；
背景颜色：浅绿色；
字体大小：20px；
}
#评论框{
宽度：100%；
框大小：边框框；
字体家族：继承；
字体大小：24px；
最大宽度：100%；
最大高度：200px；
}

提交

当按钮位于文本区域下方时，如何设置按钮宽度：100%

由于已将

inputgroup1

设置为

flex

，因此可以在子元素上使用

flex:1

，以占用整个空间

.inputgroup1{
显示器：flex；
柔性包装：包装；
}
#提交{
/*宽度：自动*/
/*显示：块*/
弹性：1；
框大小：边框框；
边际：0px；
填充：20px 0px；
背景颜色：浅绿色；
字体大小：20px；
}
#评论框{
宽度：100%；
框大小：边框框；
字体家族：继承；
字体大小：24px；
最大宽度：100%；
最大高度：200px；
}

提交

您的主要问题是按钮没有指定的宽度。 本质上，对于这个特定的问题，您甚至不需要使用flex或grid。 基本上，可以使用具有定义宽度的普通块元素。如果容器占据100%的宽度，其他元素将被推到其下方

话虽如此，我还是选择保留您当前的flex方法

你可以这样做：

.inputgroup{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
弹性：0.100%；
最大宽度：100%；
框大小：边框框；
}
.inputgroup.commentbox{
宽度：100%；
字体家族：继承；
字体大小：24px；
最大宽度：100%；
最大高度：200px；
框大小：边框框；
}
按钮#提交{
宽度：100%；
边际：0px；
填充：20px 0px；
背景颜色：浅绿色；
字体大小：20px；
框大小：边框框；
}

提交

如果要检查按钮是否位于文本区域下方（如您在问题标题中所指出的），可以尝试使用选择器：

.inputgroup1{
显示器：flex；
柔性包装：包装；
}
#评论框{
宽度：100%；
框大小：边框框；
字体家族：继承；
字体大小：24px；
最大宽度：100%；
最大高度：200px；
}
#提交{
宽度：自动；
显示：块；
框大小：边框框；
边际：0px；
填充：20px 0px；
背景颜色：浅绿色；
字体大小：20px；
}
#commentbox~#提交{
宽度：100%；
}

提交

尝试为按钮提供

flex:auto属性。