ラベルのグループが一緒に成長し、入力フィールドを縮小する方法を教えてください。

Question

私は一番広いラベルと同じくらい水平方向のスペースを取るラベルのグループを持っていると同時に、大きなラベルを収容するためにすべての入力フィールドが縮小する必要があります。私は翻訳を扱っているので、これが必要です。特定のラベルがどのくらい広いかを確認することはできません。

このような何か：

form { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
label { 
 
    width: 1%; 
 
    display: table-cell; 
 
    white-space: nowrap; 
 
    padding-right: 1em; 
 
} 
 

 
input { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.input-group { 
 
    display: table-row; 
 
} 
 

 
* { 
 
    line-height: 2em; 
 
} 
 

 
body { 
 
    padding: 2em; 
 
}

<form> 
 
    <div class="input-group"> 
 
    <label for="name">Full name of your family and yourself</label> 
 
    <input type="text" id="name" name="name" placeholder="optional"> 
 
    </div> 
 
    <div class="input-group"> 
 
    <label for="email">Email</label> 
 
    <input type="text" id="email" name="email" placeholder="optional"> 
 
    </div> 
 
    <div class="input-group"> 
 
    <label for="phone">Phone</label> 
 
    <input type="text" id="phone" name="phone" placeholder="optional"> 
 
    </div> 
 
</form>

あなたもCodepenでこれを確認することができます。

http://codepen.io/aboutandre/pen/bZRjqB

しかし、それはそこにそのこれを行うには、よりエレガントな方法ですより一般的であり、テーブルを使用することを伴わない（HTMLまたはCSSとして）？

Answer 1

入力フィールドの幅を指定して入力フィールドから継承する方法はありますか？ たとえば、名前フィールドが行列式の場合、幅は100％、その他の2つの要素は width：inherit;