如何使文本輸入框佔用按鈕右側留下的剩餘空間？

我很想訴諸表格，因爲我似乎無法想出一些CSS來實現我在這裏創建的東西。如何使文本輸入框佔用按鈕右側留下的剩餘空間？

我有一個<div>容器包含兩件事情：

一個文本輸入框（<input type='text' />）
按鈕（<input type='button' />）

我希望按鈕右對齊（我沒有給它一個固定的寬度，但我很容易）。文本輸入框應該直接放在按鈕的左邊並佔用剩餘的空間。下面是一個例子就是我在尋找：

enter image description here

不幸的是，下面的HTML沒有完成這個（原諒內嵌樣式 - 僅用於演示目的）：

<input type="button" value="Test" style="float: right;" /> 
<input type="text" style="display: block; width: 100%;" />

我tried adding a <div> wrapper，但也沒有工作。我究竟做錯了什麼？我可以通過<table>佈局輕鬆完成此操作，但我相信我一定會錯過一些東西，並且還有更好的方法。

來源

2011-10-09 Nathan Osman

這可能沒有<table>，但它不是很明顯。

參見：http://jsfiddle.net/thirtydot/wE7jc/2/

<input type="button" value="Test" style="float: right;" /> 
<div style="overflow: hidden; padding-right: 8px"> 
    <input type="text" style="width: 100%;" /> 
</div>

這部作品的原因是解釋here。

來源

2011-10-09 04:56:33 thirtydot

「溢出：隱藏」有什麼神奇之處？它做什麼，爲什麼它是必要的？ –

P.S.感謝您的答案 - 它確實工作得很好。 –

您是否在我的答案中看到（第二個）鏈接？我在最初的答案後幾分鐘添加了它，並且很好地解釋了爲什麼這會起作用。 – thirtydot

只要你不介意固定寬度按鈕，這應該這樣做：

http://jsfiddle.net/4WghJ/

基本上只是包裹在一個div輸入了正確的餘量，以補償按鍵。

來源

2011-10-09 04:59:38

如何使文本輸入框佔用按鈕右側留下的剩餘空間？

回答

相關問題