html - 画像と入力フィールド

Question

これは同じことに関する私の2番目の質問です。編集してリストに追加する方法がわかりませんか、それとも自動的に行われますか? ...

とにかく実際の質問に、スパン内に画像と入力ボックスの両方があり、それらを並べて表示したいと思います。

画像は 48x48 で、入力フィールドは残りの幅を埋める必要があります。コードが現在のように、ズーム時に壊れることはなく、そのようになるはずです。

幅を追加すると: 100%; 入力ボックスに入力すると、ズーム時に壊れてしまい、残りの幅を 100% 埋めたい理由がわかりません。

HTML:

<div id="vault_chat">
    <div id="vault_chat_header">
        <span class="user_avatar"><img src="<%tdir%>img/default_avatar.png" alt="Default Avatar" /></span>
        <span class="vault_chat_text_field"><input type="text" value="Enter a message..." /></span>
    </div>
</div>

CSS:

#vault_chat {

}

#vault_chat_header {
    height: 48px; //tried a fixed height here but it just goes outside the header.
}

.vault_chat_text_field input[type=text] {
    vertical-align: top;
}

.user_avatar img {
    width: 48px;
    height: 48px;
}

解決策がある場合は、フィドルでこれを示してください。