Question

我想要一个复选框和文本输入，它们都在一行中，文本输入是响应的。我尝试显示内联块，它工作但我不能使文本输入填充宽度100％的屏幕的其余部分，它会下降，为什么？

<div>
  <div class="left-wrap">
    <input type="checkbox" value="others" />
    <label>Others</label>
  </div>
  <input type="text" value="" />
</div>

.left-wrap {
  display: inline-block;
}

input[type="text"] {
  display: inline-block;
  //width:100%; how to make the input to fill till the rest of the screen
}

Answer 1

您可以使用Flexbox。只需在容器中添加一个类，然后使用display: flex。然后，将flex: 1添加到您的输入中：

＆＃13;

.container {
  display: flex;
}

.left-wrap,
input[type="text"] {
  display: inline-block;
}

input[type="text"] {
  flex: 1;
}

＆＃13;

<div class="container">
  <div class="left-wrap">
    <input type="checkbox" value="others" />
    <label>Others</label>
  </div>
  <input type="text" value="" />
</div>

＆＃13;

Answer 2

input[type="text"] {
  //display: inline-block;
  width: 98%; //how to make the input to fill till the rest of the screen
}

<div>
  <table>
    <tr>
      <td width="5%"><input type="checkbox" value="others" /></td>
      <td width="5%"><label>Others</label> </td>
      <td><input type="text" value="" /></td>
    </tr>
  </table>
</div>

另一种代码方法。希望它有所帮助。

Answer 3

width: 100%表示它是容器的100％（父div）。

方法1 ：您可以使用表格来执行此操作：

<table style="width: 100%; border-collapse: collapse;">
    <tr>
        <td>
            <input type="checkbox" value="others" />
            <label>Others</label>
        </td>
        <td style="width: 100%;">
            <input type="text" value="" />
        </td>
    </tr>
</table>

方法2 ：将宽度设置为.left-wrap，并根据需要不断更改宽度：

.left-wrap {
    display: inline-block;
    width: 25%; /* change this as you like */
    box-sizing: border-box;
}

input[type="text"] {
    display: inline-block;
    width: 75%; /* change this as you like */
    box-sizing: border-box;
}

但要确保两个宽度的总和不超过100％。

当然，还有其他方法，例如使用flex或float。

显示内联块不适用于宽度100％

3 个答案: