具有对齐标签长度和输入宽度的输入的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％以填充整个区域，输入字段会向右跳转，因为它们具有右移设置。

实现保持输入与最长标签对齐的最佳方法是什么，但仍然耗尽所有剩余空间？ TIA！

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： 我还提到了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>