1. 首頁
  2. 問答
  3. 顯示：塊不擴展輸入以填充父寬度

顯示：塊不擴展輸入以填充父寬度

2011-05-26 47 views
3

如何獲得輸入以擴展到父div的全寬度？對於標籤，它工作得很好。代碼可以在這裏找到：http://jsfiddle.net/7h8Zg/顯示：塊不擴展輸入以填充父寬度

是什麼讓標籤展開而不是輸入？

來源

2011-05-26 Chris Abrams

+0

的可能重複的[輸入與顯示：塊不是塊，爲什麼不]（http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a -block-why-not） – 2012-02-06 20:36:26

回答

2

如果你想輸入是大小的submit相同按鈕，您應該將width:97%添加到input規則。

http://jsfiddle.net/7h8Zg/15/

來源

2011-05-26 02:48:55

+0

看起來可行，但是你知道爲什麼輸入不像標籤那樣自行擴展？ – 2011-05-26 02:58:04

+0

從我所知道的情況來看，'li .input'是左邊浮動的，它的寬度不會跨越整個顯示...直到你在'input'元素上設置一個'width'。 – 2011-05-26 03:35:20

-1

添加

width: 100%;

到輸入類允許輸入擴展到父div的全尺寸。

的jsfiddle：http://jsfiddle.net/7h8Zg/5/

來源

2011-05-26 02:39:39

+1

它很接近，但它不能完全工作。由於填充和邊框，它實際上會使寬度高於100％。 – 2011-05-26 02:41:56

3

變化左填充爲百分比，並將剩餘的寬度，像這樣：

padding:0 0 0 2%;width:98%;

來源

2011-05-26 02:40:36

+0

這有效，但不是完美的像素。由於邊界，它仍然是1px。抱歉挑剔，但我不明白爲什麼標籤擴大，但輸入不。 – 2011-05-26 02:56:39

+0

對，我認爲你可以通過將邊框放在父容器上並將其從輸入中刪除來獲得像素完美 – 2011-05-26 03:21:04

相關問題

 相關問題