Html 如何使父元素扩展到其子元素的宽度？

我有一个带有嵌套的

元素。按钮的样式使用

：before

和

：after

伪选择器：

<div>
  <button type="submit"><span>Submit Form Too Long</span></button>
</div>

提交表单太长

但是，当我展开

的内容时，它只换行到下一行，没有：

扩展父按钮的高度，从而在其溢出时丢失样式

它也不会扩展父元素的宽度

拥有能够利用其中任何一个的选项都是理想的。我在下面的链接中创建了一个代码笔示例。内容过长的按钮是顶部的

submit

（蓝色）

---

我该怎么做才能让它按我想要的方式运行？我怀疑伪选择器在这里引起了一些有趣的事情。

这是您的最新版本。你有很多CSS与自己斗争，没有文本的元素的文本样式，等等

我把它清理干净，简化了你的按钮。背景现在位于元素本身，没有额外的跨距等。如果添加最大宽度，则所有内容将正确包裹，并且所有内容都应保持居中

不会完全正常工作，但下面是SO格式的代码

@charset“UTF-8”；
* {
保证金：0；
填充：0；
边界：0；
大纲：0；
字体大小：100%；
垂直对齐：基线；
背景：透明；
}
身体{
字体大小：100%；
垂直对齐：基线；
填充：20px；
背景：#fff；
字体系列：“机器人”；
}
钮扣{
显示：块；
保证金：20px自动；
位置：相对位置；
光标：指针；
最小宽度：13em；
最小高度：50px；
边框顶部：1px实心#0e0f；
边界半径：6px；
填充：8px 50px 8px 8px；
字体大小：16px；
线高：100%；
垂直对齐：中间对齐；
颜色：#333；
过渡：所有0.4s缓解；
}
按钮：之后{
位置：绝对位置；
右：10px；
最高：50%；
变换：translateY（-50%）旋转（0度）；
宽度：20px；
高度：20px；
线高：20px；
文本对齐：居中；
字体大小：16px；
字体大小：粗体；
字体系列：“字体真棒5免费”；
过渡：变换400ms缓进缓出；
}
按钮：之前{
内容：“；
位置：绝对位置；
排名：0；
底部：0；
右：40px；
宽度：1px；
背景色：#777777；
}
按钮：悬停：之后{
变换：translateY（-50%）旋转（360度）；
}
按钮：激活{
变换：平移（2px，2px）；
}
按钮：活动：之后{
颜色：#0c397c；
}
按钮[type=“button”]{
填充：8px；
背景图像：线性渐变（至底部，白色，#AAAAA）；
框阴影：插入0 1px 0 rgba（255，255，255，0.05），插入0 0 1px rgba（255，255，255，0.1），0 3px 6px rgba（0，0，0，0.65），0 1px 2px rgba（0，0，0，0.9）；
}
按钮[type=“button”]：之前，按钮[type=“button”]：之后{
显示：无；
}
按钮[type=“button”]：悬停{
背景图像：线性渐变（至底部，#f4，#a0a0）；
框阴影：插入0 1px 0 rgba（255，255，255，0.05），插入0 0 1px rgba（255，255，255，0.1），0 3px 6px rgba（0，0，0，0.65），0 1px 5px rgba（0，0，0，0.9）；
}
按钮[type=“button”]：激活{
边框颜色：#AAAAA；
背景图像：线性渐变（至底部，#bcbc，#c4c4）；
框阴影：插入0 1px 0 rgba（255，255，255，0.05），插入0 0 1px rgba（255，255，255，0.1），0 1px 1px rgba（0，0，0，0.75），0 1px 1px rgba（0，0，0，0.95）；
}
按钮[type=“submit”]{
颜色：#fafafa；
背景图像：线性渐变（至底部，#0780cc，#033351）；
框阴影：插入0 1px 0 rgba（255，255，255，0.05），插入0 0 1px rgba（255，255，255，0.1），0 3px 6px rgba（0，0，0，0.65），0 1px 2px rgba（0，0，0，0.9）；
}
按钮[type=“submit”]：在{
内容：“";
}
按钮[type=“submit”]：悬停{
背景图像：线性渐变（至底部，#0671b3，#044269）；
框阴影：插入0 1px 0 rgba（255，255，255，0.05），插入0 0 1px rgba（255，255，255，0.1），0 3px 6px rgba（0，0，0，0.65），0 1px 2px rgba（0，0，0，0.9）；
}
按钮[type=“submit”]：悬停：在{
颜色：#ededed；
}
按钮[type=“submit”]：激活{
背景图像：线性渐变（至底部，#03395b，#033f64）；
框阴影：插入0 1px 0 rgba（255，255，255，0.05），插入0 0 1px rgba（255，255，255，0.1），0 1px 1px rgba（0，0，0，0.75），0 1px 1px rgba（0，0，0，0.95）；
}
按钮[type=“submit”]：活动：之后{
颜色：#D4；
}
按钮[type=“reset”]{
颜色：#efefef；
边框颜色：#546e7a；
背景图像：线性渐变（至底部，#869ba5，#333f45）；
}
按钮[type=“reset”]：在{
内容：“";
颜色：#eceff1；
}
按钮[type=“reset”]：悬停{
背景：线性梯度（至底部，#889da7 0%，#55707e 100%）；
框阴影：插入0 1px 0 rgba（255，255，255，0.05），插入0 0 1px rgba（255，255，255，0.1），0 3px 6px rgba（0，0，0，0.75），0 1px 2px rgba（0，0，0，0.95）；
}
按钮[type=“reset”]：悬停：在{
颜色：#E2；
}
按钮[type=“reset”]：激活{
边框颜色：#2f4753；
背景：线性梯度（至底部，#496878 0%，#3c5b6b 100%）；
框阴影：插入0 1px 0 rgba（255，255，255，0.05），插入0 0 1px rgba（255，255，255，0.1），0 1px 1px rgba（0，0，0，0.75），0 1px 1px rgba（0，0，0，0.95）；
}
按钮[type=“reset”]：激活：之后{
颜色：#c9c9c9；
}

提交表单太长
默认动作
重置表单

跨度不会影响父对象的高度/宽度，因为您已将其设置为

位置：绝对；

。定位为绝对或固定的元素不在文档流中，不会影响父对象或其周围的任何元素。当然。我可以如何使其按我希望的方式运行？这是什么e使用伪类只是为了改变背景的理由？我理解图标，但其他图标似乎没有必要。删除它也会让你删除跨度，这样按钮就可以按预期运行。我试图为你简化CSS，但按钮的最大宽度是导致换行的原因。当你添加文本时，按钮无法扩展@BryceHowitson我觉得包装还行，听起来他只是想要