固定未知寬度的液體寬度文本框複選框，按鈕

Question

我希望（液體）文本框和按鈕/複選框位於單個行上。我的方法只能在Firefox和IE中正常工作，而不能在Chrome中正常工作。 Chrome在複選框和按鈕右側有一個填充。

我不想在複選框和按鈕上設置寬度，因爲人們的瀏覽器字體可能不同，寬度也是如此。所以我不想使用負邊距方法。

任何人都有更好的解決方案？我接受JavaScript。

試試這個鏈接在Firefox和鉻，你會發現差異。

http://jsfiddle.net/9f9dK/2/

#nav { 
    width: 100%; 
} 
#table { 
    height: 32px; 
    display: table; 
    cellpadding: 0; 
    width: 100%; 
} 
#table-row { 
    display: table-row; 
    cellpadding: 0; 
    width: 100%; 
    white-space: nowrap; 
} 
.table-cell { 
    display: table-cell; 
    white-space: nowrap; 
    border-collapse: collapse; 
    cellpadding: 0; 
    width: 0; 
} 
#table-cell-textfield { 
    width: 100%; 
    white-space: nowrap; 
} 
#table-cell-textfield input { 
    width: 100%; 
    display: table-cell; 
    white-space: nowrap; 
} 
.table-cell label { 
    width: 0; 
} 
.table-cell input { 
} 

<div id="table"> 
    <div id="table-row"> 
    <div class="table-cell"> 
     <input name="" type="checkbox" value="" /> 
     <label>option 1</label> 
     <input name="" type="checkbox" value="" /> 
     <label>this is option 2</label> 
     <input name="" type="checkbox" value="" /> 
     <label>3 is here</label> 
     <input name="" type="checkbox" value="" /> 
     <label>Im 4</label> 
     <input name="" type="checkbox" value="" /> 
     <label>last one</label> 
    </div> 
    <div id="table-cell-textfield"> 
     <input name="" type="text" /> 
    </div> 
    <div class="table-cell"> 
     <input type="button" value="search" /> 
    </div> 
    </div> 
</div> 

Answer 1

嘗試改變的table-cell的CSS width屬性1px：

.table-cell { 
     display: table-cell; 
     white-space: nowrap; 
     border-collapse: collapse; 
     cellpadding: 0; 
     width: 1px; 
} 

似乎做了鍍鉻的伎倆，仍然在Firefox看起來不錯。