html - CSS - h1 take rest of width

Question

In my titlebox I have an icon (<img>) and a title (<h1>). Both are floated to the left.

I would like my title (<h1>) to take up the rest of the width of the box. So if I put text-decoration: underline; on the <h1>, the underline must go on to 'till the end of the box.

JsFiddle: http://jsfiddle.net/44XDa/1/

Basically I want the line under Welcome to go 'till the end of the yellow box.

Can anyone help?

Answer 1

h1エリア内の他の要素だけが既にフローティングされている場合は、フロートを作成する必要はありません。他のポスターがすでに指摘しているように、この効果を得るには、下線ではなく境界線を使用することをお勧めします。ここに私の編集があります：

http://jsfiddle.net/44XDa/36/

h1私のソリューションと上記のソリューションの主な違いは、これが要素の幅を設定しないことです。divこれにより、将来content-title の幅を変更する場合に簡単になります。

Answer 2

この変更を確認してください

ボーダーボトムを使用して、下線を最後までシミュレートしました。行の高さを減らし、上部にパディングを追加して、元の場所に配置しました。テキストの装飾を取り除くと、1 行になります。

Answer 3

どうぞ：

http://jsfiddle.net/44XDa/34/

これはあなたが望むものでしょうか？

Answer 4

ライブデモ

ちょっと、このようにh1box-shadowを削除することに慣れて、次のように結論を出すことができました float leftline-height

ライブデモ