带有对齐输入标签长度和输入宽度的 CSS 内联表单是剩余空间

Question

我想创建内联标签和输入，并且我希望所有标签都具有最长标签的宽度。这是我已经实现的，这就是我目前的结果：

问题是我希望输入字段是右侧剩余空间的宽度，如下图所示：

这是表单的css：

    form ol {
  margin: 0px;
  list-style-type: none;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}
fieldset {
    border: 0px solid silver;
    margin: 10px;
    padding: 10px;
    min-width: 100px;
    display: inline-block;
}

fieldset li{
    width: 100%;
    display: block;
    position: relative;
    margin-bottom: 2px;
}

fieldset label{
    margin-right: 10px;
    position: relative;
}

fieldset label:after{
    content: ": ";
    position: absolute;
    right: -0.2em;
}

fieldset input{
    float: right;
}

这是我的html：

<form>
    <ol>
        <fieldset>
                <li><label for="username">Username</label><input type="text" id="username" required  /></li>
                <li><label for="username">This is some long text</label><input type="text" id="username" required  /></li>
        </fieldset>

    </ol>
</form>

一旦我将字段集宽度设置为 100% 以填充整个区域，输入字段就会跳到右侧，因为它们设置了浮动右侧。

保持输入与最长标签对齐但仍会用完所有剩余空间的最佳方法是什么？蒂亚！

Answer 1

使用表格的简单解决方案：

form, table, input{
  width: 100%;
}

.label-col{
  width: 1px;
  white-space: nowrap;
}

label{
    margin-right: 10px;
}

label:after{
    content: ": ";
}

<form>
    <table>
      <tr>
        <td class="label-col"><label for="username">Username</label></td>  
        <td><input type="text" id="username" required/></td>
      </tr>
      <tr>
        <td class="label-col"><label for="username2">This is some long text</label></td>  
        <td><input type="text" id="username2" required/></td>
      </tr>
      <tr>
        <td class="label-col"><label for="username3">This text is even longer heh</label></td>  
        <td><input type="text" id="username3" required/></td>
      </tr>
    </table>
</form>

如果您知道标签的最大宽度和/或可以剪裁标签，您也可以使用 flexbox：

form, fieldset{
  width:100%;
}

fieldset{
  border: 0 none;
  display: flex;
  padding: 5px 0;
  margin: 0;
}

label{
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input{
  flex: 1 1 0;
}

<form>
  <fieldset>
    <label for="username1">Username</label>  
    <input type="text" id="username1" required/>
  </fieldset>
    <fieldset>
    <label for="username1">This is some long text</label>  
    <input type="text" id="username1" required/>
  </fieldset>
  <fieldset>
    <label for="username2">This text is longer than the max width asd</label>  
    <input type="text" id="username2" required/>
  </fieldset>
</form>

Answer 2

查看此演示，您只需将 float left 添加到表单标签： 我还提到了 css 代码中的编辑。你可以检查一下。

表单演示：

form ol {
      margin: 0px;
      list-style-type: none;
     -webkit-margin-before: 0em;
     -webkit-margin-after: 0em;
     -webkit-margin-start: 0px;
     -webkit-margin-end: 0px;
     -webkit-padding-start: 0px;
}
fieldset {
    border: 0px solid silver;
    margin: 10px;
    padding: 10px;
    min-width: 500px; /** Added for fix **/
    display: inline-block;
}

fieldset li {
    width: 100%;
    display: block;
    position: relative;
    margin-bottom: 10px;
    overflow: hidden; /** Added for fix **/
}

fieldset label {
    position: relative;
    float: left; /** Added for fix **/
}

fieldset label:after{
    content: ": ";
    position: absolute;
    right: -0.2em;
}

fieldset input {
    float: right;
    width: 68%; /** Added for fix **/
}

<form>
    <ol>
        <fieldset>
                <li><label for="username">Username</label><input type="text" id="username" required  /></li>
                <li><label for="username">This is some long text</label><input type="text" id="username" required  /></li>
        </fieldset>

    </ol>
</form>