Html CSS-h1占据剩余宽度

在我的标题框中，我有一个图标（

）和一个标题（

）。两者都向左浮动

我希望我的标题（

）占据方框的剩余宽度。所以如果我把文字装饰：下划线；在

上，下划线必须一直延伸到“直到方框末尾”

JsFiddle：

基本上，我希望欢迎下的队伍一直排到黄色方框的末尾

有人能帮忙吗？

我使用border bottom来模拟下划线，直到结束。我降低了你的线条高度，加上了填充物，把它放在原来的位置。删除文本装饰，您将有一行。

给您：

---

这可能是您想要的吗？

如果区域中唯一的其他元素已经浮动，则不需要使

h1

浮动。正如其他海报已经指出的，您可能希望使用边框而不是下划线来获得这种效果。以下是我的编辑：

我的解决方案与上面的解决方案的主要区别在于，这个解决方案没有为

h1

元素设置宽度。如果您决定将来更改内容标题的宽度

div

，这将使更改更加容易。

他们现在习惯于像这样

box shadow

和删除h1

向左浮动

，并管理底线作为

行高

---

谢谢，但是当您将span2更改为例如span1时，该解决方案会破坏它。我想我可以为每个跨度指定h1宽度，这是最好的解决方案吗？