CSS / JS - 包裝元素的水平對齊

Question

我在使用標簽創建一組輸入的響應式布局時遇到問題。 我希望它們在有足夠的水平空間時保持在一條線上，否則包裹但保持水平對齊。

讓我們在圖片上顯示它。

這就是我要的：

這是我到目前為止所得到的： JSFiddle

藍色元素的寬度始終相同，因此不是問題。 橙色元素具有不同的寬度，我希望它們水平對齊。 我不能將它們設置為相同的寬度，因為它們會在單行時浪費空間。

到目前為止我嘗試了什么：

1. display: table-cell

   問題是它無法包裝。

2. 容器： display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap; 兒童與右邊對齊。

   問題是當容器包裹時容器沒有收縮到子寬度，所以整個組移動到右側，這不是我想要的。

3. 使用JS設置橙色元素的相等寬度。

   問題是，只有當線被包裹時，它們應該具有相等的寬度，並且我沒有看到可靠的方法來檢測它是否被包裹。

任何解決方案歡迎 我不介意它是不是純CSS解決方案，我失去了希望這樣的存在。

編輯：與此問題的不同之處在於元素在行之間和行內都有不同的寬度。

Answer 1

嘗試這個：

 label{display:inline-block;width:130px;text-align:right;} div.inner{display:inline-block;} 

 <div class="inner"> <label>Please Enter Name:</label><input type="text"> </div> <div class="inner"> <label> Address:</label><input type="text"> </div> 

結果：

案例1：全寬可用時

案例2：寬度縮小時

Answer 2

我找到了適合這種特殊情況的解決方案：

.A {
  margin-left: 53px;
}

.C1 {
  margin-left: -53px;
}

.C2 {
  margin-left: 0px;
}

的jsfiddle

當標簽發生變化時，必須在JS中重新計算邊距值，這可能發生在我的情況下。

這是部分解決方案，因為不幸的是，如果第一個標簽是較短的標簽，它也不會起作用，這也可能發生。