輸入元素填補剩餘寬度

有提出關於CSS &剩餘寬度已經有很多的問題。閱讀完後，我仍然有一個問題，我無法修復。當試圖讓輸入元素用盡剩餘寬度時，它總是比其包含的div寬4px。輸入元素填補剩餘寬度

<!DOCTYPE html> 
<html> 
<body> 
    <div> 
     <div style='float:left; margin-right:10px;'>Hello:</div> 
     <div style='overflow:hidden'><input style='width:100%'/></div> 
    </div> 
</body> 
</html>

input元素總是4個像素太寬而不能顯示其右邊界。如果我設置輸入的margin-left到-4px變得可見，但則不會顯示的左邊框。

使用Chrome測試這一點。

來源

2012-09-13 Tin

我們能看到你的CSS嗎？ – Kyle

上面的代碼已完成。在這個簡化的例子中，我使用了'style'屬性和一個單獨的CSS文件。你可以將它粘貼到jsfiddle中。 – Tin

但是在CSS中沒有太多的建議你有一個「填充剩餘空間」解決方案？ – Kyle

你可以添加box-sizing: border-box;您input，以避免溢出。它的基本功能是在設置width: 100%時將考慮邊框和填充。請注意，你必須包括幾個供應商前綴爲不同的瀏覽器：

.myinput { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    border: 2px solid orange; /*just to make border more clear*/ 
    width: 100%; 
}

小演示：little link。

來源

2012-09-13 13:08:25 Chris

工程就像一個魅力！ – Tin

輸入元素填補剩餘寬度

回答

相關問題