CSS使文本输入占用表格单元格宽度的其余部分

Question

在表格单元格中，我有1个选择元素和1个文本输入元素。 select元素的固定宽度可以设置为100px。

如何让文本输入占用单元格宽度的其余部分？

<td> 
    <div> 
     <select> 
     <option>string</option> 
     <option>integer</option> 
     </select> 
     <input type="text"> 
    </div> 
</td> 

Answer 1

试试这个：

table { width: 100%; } 
select { width: 100px; } 
input { width: calc(100% - 110px); } 

DEMO：http://jsfiddle.net/1xwfwrz9/1/

Answer 2

你可以使用浮动属性：

table { 
 
    width:80%;/* for demo */ 
 
} 
 
select { 
 
    width:100px; 
 
    float:left;/* start playing with float */ 
 
} 
 
label {/* or whatever you choose to wrap input */ 
 
    display:block; 
 
    overflow:hidden;/* use a container turned into block to stand aside the float*/ 
 
} 
 
input { 
 
    width:100%;/* spread it all the way in avalaible space */ 
 
}

<table><tr> 
 
<td> 
 
    <div> 
 
     <select> 
 
     <option>string</option> 
 
     <option>integer</option> 
 
     </select> 
 
     <label> 
 
     <input type="text"/> 
 
    </label> 
 
    </div> 
 
</td></tr> 
 
</table>