动态自动输入文本宽度与css

Question

我不确定这有多容易，但因为我通常在php中编码并输出html，我可以从那里做任何计算

问题：

我有a simple form，我希望输入文本字段在标签后面开始，但在同一位置结束。即拥有最大的出生日期，然后将每个人扩展到那里

我尝试了一些最大宽度/最小宽度和宽度的东西，但似乎没有任何效果

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

如果可能，我更喜欢非JavaScript的解决方案！

Answer 1

使用FlexBox的示例：您还可以设置width（或min/max-width到form元素（或ul元素）

Codepen：http://codepen.io/anon/pen/oXdbab

<强> 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> 

<强> CSS

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;
}

<强>结果

最后注意事项：IE<10.不支持Flexbox模块，但仅在这些浏览器上，您可以在条件注释中使用脚本，例如

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