Html CSS内联表单，输入对齐到标签长度和输入宽度是剩余空间

我想要创建内联标签和输入，并且我想要所有标签具有最长标签的宽度。我已经做到了这一点，这就是我目前的结果：

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

这是表单的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>

用户名
这是一篇很长的文章

一旦我将fieldset width设置为100%以填充整个区域，输入字段就会向右跳转，因为它们设置了float right

---

实现输入与最长标签对齐，但仍占用所有剩余空间的最佳方法是什么？蒂亚

检查此演示，只需在表单标签中添加左浮动： 我还提到了css代码中的编辑。你可以查一下

表单演示：

formol{
边际：0px；
列表样式类型：无；
-之前的webkit页边距：0em；
-webkit页边距：0em；
-webkit保证金开始：0px；
-webkit页边距结束：0px；
-webkit填充开始：0px；
}
字段集{
边框：0px纯银；
利润率：10px；
填充：10px；
最小宽度：500px；/**为修复而添加**/
显示：内联块；
}
李场集{
宽度：100%；
显示：块；
位置：相对位置；
边缘底部：10px；
溢出：隐藏；/**为修复而添加**/
}
字段集标签{
位置：相对位置；
浮动：左；/**为修复而添加**/
}
字段集标签：在{
内容：“：”；
位置：绝对位置；
右：-0.2米；
}
字段集输入{
浮动：对；
宽度：68%；/**为修复而添加**/
}

用户名
这是一篇很长的文章

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

表单、表格、输入{
宽度：100%；
}
.标签颜色{
宽度：1px；
空白：nowrap；
}
标签{
右边距：10px；
}
标签：后{
内容：“：”；
}

用户名
这是一篇很长的文章
这篇课文更长了呵呵
内部的
不是有效的html。看你是对的，我从这个问题中提取了代码，该代码被标记为正确。你建议将标签向左浮动是一种改进，但你仍然在输入上定义了68%的宽度，这意味着如果标签很长或面积很小，它仍然会断裂。同意吗@Ronnyvdb@Ronnyvdb还有罗希特·库马尔，实际上表单有两个部分，第一部分用于标签，第二部分用于输入。我们不能对输入部分采用100%宽度。这就是为什么表单输入将来自包装器的左侧。@SayedRafeeq是的，您对问题的解释是正确的，但我正在寻找一种不会包装这两个部分的解决方案。也许这是不可能的，只有使用css@Ronnyvdb，可能是您的要求大不相同。。如果要拉伸输入区域的宽度，可以通过更改包装宽度来实现此目的。：）虽然我不喜欢使用表格进行布局，但我接受了你的答案，因为它确实解决了问题，而宽度为+1=“1px”的trickI也不喜欢。如果您想保留一些语义，可以使用css显示而不是表。e、 g.
显示：表格