入力されたテキストを伸ばして、それが入っている区画を塗りつぶします

Question

私は、ラベルと入力テキストを含むHTML divを持っています。私は、ラベルに最小スペースをとり、テキスト入力に残りのスペースを与えたいと思っています。言い換えれば、ラベルがそのスペースを占有したら、テキスト入力がdivに含まれるdivの最後まで水平に伸びるようにしたいと思います。ここでは私が使用しているサンプルコードを示します。

<div> 
    <label >Some Label</label> <!--Should take minimum space --> 
    <input type="text"/>  <!--Should stretch horizontally to fill up entire div --> 
</div> 

Answer 1

demo here

完璧しかし、あなたはその

に実装しようとすることができない私はこれがために起こっている

.notificationArea 
{ 
    width: 100%; 
    vertical-align: left; 
    text-align:left; 
    background: #ccc; 
    display: table; 
} 
.notificationArea label, .notificationArea input { 
    display: table-cell 
} 
.notificationArea input { 
    width: 100% 
}