Html 使用css动态自动输入文本宽度

我不确定这有多容易，但因为我通常用php编写代码并输出html，所以我可以从那里进行任何计算

问题：

我有，我希望输入文本字段在标签之后开始，但在相同的位置结束。i、 e.有一个最大的出生日期，然后把每个人都扩展到那里

我尝试了一些使用“最大宽度/最小宽度”和“宽度”的方法，但似乎没有任何效果

.input_field {
    max-width:150px;
    width:100%;
}

---

如果可能的话，我更喜欢非javascript解决方案

使用

FlexBox

的示例：您还可以将

宽度

（或

最小/最大宽度

设置为

表单

元素（或

ul

元素）

代码笔：

HTML

<form>

  <ul>

    <li>
      <label>Label regular</label>
      <input type="text" />
    </li>

    <li>
      <label>Label2 really really longer</label>
      <input type="text" />
    </li>

    <li>
      <label>Label</label>
      <input type="text" />
    </li>

  </ul>

</form> 

---

结果

---

最后一点注意：

IE不支持Flexbox模块

这对较旧的浏览器和ie会有什么反应？我在其他地方遇到了flex，发现其他浏览器有问题。焊料浏览器会像您的示例中那样显示表单，因此表单仍然可用。如果您有特定的要求，您应该在问题中详细说明，事实上相当不错，-但您所失去的只是IEwell中的一些样式，这不是一个请求，但如果：）会更好，我会再给10-15分钟，如果没有更好的答案，那么我会将你标记为一个讽刺的是，你可能会在旧浏览器上得到一个更有用的表单：-Phave你考虑过如果标签和字段对齐都搞砸了，这会有多有用吗？所有证据都表明，在实际填写表单时，对齐的字段和标签最适合用户不幸的是，我只是程序员：）@Alexandros为什么不将它们包装成固定宽度的div，并将标签设置为“float:left”，将输入设置为“float:right”@Alexandros试试看，你会看到：）@Alexandros-那么你的设计师应该了解一下

form ul { 
  list-style: none; 
  margin: 20px 0; padding: 0; 
  max-width: 500px;
}

form li {
   display: flex;
   margin: 10px 0 0 0;
}

form input {
  margin-left: 2em;
  flex-grow: 1;
}

<!--[if lte IE 9]>
   <script>
      ...
   </script>
<![endif]-->