顯示內聯塊不能使用寬度100％

Question

我想要一個複選框和文本輸入，他們都將在一行中，文本輸入是響應。我嘗試顯示行內塊，它的工作，但我不能使文本輸入填充寬度100％的屏幕的其餘部分，它會下降，爲什麼？

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 
} 

Answer 1

您可以使用Flexbox的爲。只需將一個課程添加到您的容器中，然後使用display: flex。然後，添加flex: 1到您的輸入：

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

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。