如何讓一組標籤一起增長並分別縮小輸入字段？

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％，而另外兩個元素 - width：inherit;