display inline-block doesn't work with width 100%

Question

I want to have a checkbox and text input, both of them will be in one line, the text input is responsive. I tried display inline-block, it worked but I can't make the text input to fill rest of the screen with width 100%, it will go down, why?

https://jsfiddle.net/shk4v0ep/

<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
}

score 2 · Answer 1 · answered Mar 05 '17 at 10:27

You can use Flexbox for that. Simply add a class to your container, and use display: flex. Then, add flex: 1 to your input:

.container {
  display: flex;
}

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

input[type="text"] {
  flex: 1;
}

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

score 0 · Answer 2 · answered Mar 05 '17 at 10:35

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>

Another approach to code. Hope it helps.

score 0 · Answer 3 · answered Mar 05 '17 at 10:49

width: 100% means it's 100% to the container (which is the parent div).

Approach 1: You can do it with a table, like this:

<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>

Approach 2: Set width to the .left-wrap, and keep changing the widths as you like:

.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;
}

But make sure the sum of both widths don't exceed 100%.

And of course, there are other approaches, like using flex or float.

display inline-block doesn't work with width 100%

3 Answers3