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

Question

我在创建一组带有标签的输入的响应式布局时遇到问题。 当有足够的水平空间时，我希望它们保持在一行，否则换行但保持水平对齐。

让我们在图片上显示它。

这就是我想要的:

这是我到目前为止得到的: JSFiddle

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

到目前为止我尝试过的:

1. 显示:表格单元格

   问题是它无法换行。

2. 容器:显示:flex； flex-wrap: wrap; 子项向右对齐。

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

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

   问题是只有当线条是时它们才应该具有相等的宽度 包装，我没有找到可靠的方法来检测它是否是 包装与否。

欢迎

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

编辑:与this question的区别是元素在行之间和一行内具有不同的宽度。

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:宽度缩小时