CSS / JS - 包装元素的水平对齐

Question

使用标签创建一组输入的响应式布局时遇到问题。 我希望它们在有足够的水平空间时保持在一条线上，否则包裹但保持水平对齐。

让我们在照片上显示它。

这就是我想要的：

这是我到目前为止所得到的： JSFiddle

蓝色元素的宽度始终相同，因此不是问题。 橙色元素具有不同的宽度，我希望它们水平对齐。 我无法将它们设置为相同的宽度，因为它们会在单行时浪费空间。

到目前为止我尝试了什么：

1. display: table-cell

   问题是它无法包装。

2. 容器：display: flex; flex-wrap: wrap;儿童与右侧对齐。

   问题是容器没有缩小到子宽度 当它们包裹时，所以整个组移动到右侧而不是 我想要的是什么。

3. 使用JS设置相等宽度的橙色元素。

   问题是它们只有在线条时才应具有相等的宽度 包裹，我没有看到一个可靠的方法来检测它是否 包裹与否。

欢迎任何解决方案。我不介意它是不是纯CSS解决方案，我失去了希望这样的存在。

编辑：与this question的区别在于元素在行之间和行内都有不同的宽度。

Answer 1

试试这个：

＆＃13;

＆＃13;

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

＆＃13;

<div class="inner">

<label>Please Enter Name:</label><input type="text"> 

</div> 

<div class="inner"> 

<label> Address:</label><input type="text"> 

</div> 

＆＃13;

＆＃13;

＆＃13;

<强>结果：

案例1：全宽可用时

案例2：宽度缩小时

Answer 2

我找到了适用于这种特殊情况的解决方案：

.A {
  margin-left: 53px;
}

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

.C2 {
  margin-left: 0px;
}

JSFiddle

当标签发生变化时，必须在JS中重新计算保证金的值，这可能发生在我的情况下。

这是部分解决方案，因为不幸的是，如果第一个标签是较短的标签，它也不会起作用，这也可能发生。