在有序列表中使用 flex 将输入字段拉伸到剩余的 space

Question

我正在处理一个带有有序列表的表单。每个 <li> 都有一个 <label> 和一个 <input> 字段。我使用 float 将两个列表项放在一行中，但我无法用 input 字段填充它们之间的 space。看一看：

尝试将 flex 与内联格式一起使用，但它不起作用。另外，不能使用 box-sizing: border-box; 属性因为列表的编号消失了。尝试了 this answer（不是第一部分，因为不能使用 JavaScript）但它没有帮助。我应该怎么办？这是代码：

<ol>
    <li style="float: left;"><b>
      <label>NIC.#: </label>
      <input type="text" name="nic">
    </b></li>
    <li style="float: right;"><b>
      <label>DOB: </label>
      <input type="DOB" name="bday">
    </b></li>
    <br><br>
    <li style="float: left;"><b>
      <label>Email: </label>
      <input type="email" name="e-mail">
    </b></li>
    <li style="float: right;"><b>Gender 
      <input type="radio" name="gen">
      <label>Male</label>
      <input type="radio" name="gen">
      <label>Female</label>
    </b></li>
</ol>

Answer 1

你可以通过使用 display flex 和 width 属性,

ol {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

ol li {
    margin: 15px;
    width: calc(50% - 30px);

}

input {
    width: 100%;
}

b {
    width: 100%;
    display: flex;
}

<ol>
    <li><b>
      <label>NIC.#: </label>
      <input type="text" name="nic">
    </b></li>
    <li><b>
      <label>DOB: </label>
      <input type="DOB" name="bday">
    </b></li>
    <li><b>
      <label>Email: </label>
      <input type="email" name="e-mail">
    </b></li>
    <li><b>Gender 
      <input type="radio" name="gen">
      <label>Male</label>
      <input type="radio" name="gen">
      <label>Female</label>
    </b></li>
</ol>

在有序列表中使用 flex 将输入字段拉伸到剩余的 space

Stretch the input field to the remaining space using flex in an ordered list

html

css

html-lists

flexbox